Next.js ইনস্টলেশন – ধাপে ধাপে

১️. আপনার সিস্টেম চেক করুন

Next.js ব্যবহার করার আগে নিশ্চিত করুন আপনার কম্পিউটার কিছু জিনিস মেনে চলে:

Node.js 18.18 বা তার উপরের ভার্সন থাকতে হবে। Node.js ডাউনলোড (opens in a new tab)
আপনি যে অপারেটিং সিস্টেম ব্যবহার করছেন, সেটা হতে পারে Windows, macOS, Linux, বা Windows হলে WSL।

🎧 Next JS App ইনস্টল

👉 সময় কম অডিও ফাইলটি শুনুন 🚀

২️. দ্রুত ইনস্টলেশন (Automatic)

Next.js App বানানোর সবচেয়ে সহজ উপায় হলো create-next-app ব্যবহার করা। এটা আপনার জন্য সবকিছু সেটআপ করে দেবে।

Terminal এ লিখুন:

npx create-next-app@latest

ইনস্টলেশন শুরু হলে কিছু প্রশ্ন করবে, যেমন:

Project এর নাম কি হবে? → my-app
TypeScript ব্যবহার করবে কি? → Yes / No
ESLint ব্যবহার করবে কি? → Yes / No
Tailwind CSS ব্যবহার করবে কি? → Yes / No
কোড কোথায় রাখবে? → src/ folder / root
App Router ব্যবহার করবে কি? → Yes / No
Turbopack ব্যবহার করবে কি? → Yes / No
Import alias customize করবে কি? → Yes / No
Alias কেমন হবে? → @/*

প্রম্পট শেষ হলে, Next.js আপনার প্রজেক্ট তৈরি করে দেয় এবং সকল প্রয়োজনীয় ডিপেন্ডেন্সি ইনস্টল করে দেয়।

৩️. ম্যানুয়াল ইনস্টলেশন (Optional)

আপনি কাস্টমাইজ ভাবেও ইনস্টল করতে পারেন।

PNPM ব্যবহার করলে:

pnpm i next@latest react@latest react-dom@latest

NPM ব্যবহার করলে:

npm i next@latest react@latest react-dom@latest

yarn add next@latest react@latest react-dom@latest

bun add next@latest react@latest react-dom@latest

💡 মনে রাখবেন:

App Router নতুন React ভার্সন ব্যবহার করে (React canary releases)।

Pages Router আপনার package.json এ থাকা React ভার্সন ব্যবহার করে।

এরপর আপনার package.json এ এই স্ক্রিপ্টগুলো যোগ করুন:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}

next dev → Development সার্ভার চালু করবে
next build → Production build বানাবে
next start → Production সার্ভার চালাবে
eslint → কোড চেক করবে

৪️. App Router এর জন্য (app folder)

app folder তৈরি করুন।
ভিতরে layout.tsx ফাইল তৈরি করুন। এটা Root Layout।

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

হোম পেজ তৈরি করুন – app/page.tsx

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

✅ এখন / এ গেলে আপনার হোম পেজ দেখবেন।

৫️. Pages Router এর জন্য (pages folder)

pages folder তৈরি করুন।
হোম পেজ – pages/index.tsx

export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Global Layout – pages/_app.tsx

import type { AppProps } from "next/app";
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Custom Document – pages/_document.tsx

import { Html, Head, Main, NextScript } from "next/document";
 
export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

৬️. Create Public Folder (Optional)

public folder বানিয়ে নিন।
এই ফোল্ডারে আপনি ছবি, ফন্ট, ইত্যাদি রাখবেন।
উদাহরণ:

import Image from "next/image";
 
export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />;
}

৭️. Development Server চালানো

Terminal এ লিখো:

npm run dev

ব্রাউজারে যান: http://localhost:3000 (opens in a new tab)
Edit করে save করুন – পরিবর্তন দেখবেন রিয়েল টাইমে।

৮️. TypeScript সেটআপ

Minimum TypeScript version: 4.5.2
.ts / .tsx ফাইল বানিয়ে নিন, তারপর next dev চালান।
Next.js নিজেই dependencies ইনস্টল করবে এবং tsconfig.json বানাবে।

৯. ESLint সেটআপ

Next.js এর সাথে built-in ESLint আসে। নতুন প্রজেক্টে create-next-app স্বয়ংক্রিয়ভাবে ইনস্টল করে।
Existing প্রজেক্টে যোগ করতে package.json এ স্ক্রিপ্ট যোগ করুন:

"lint": "next lint"

চালান: npm run lint → প্রম্পট আসবে: Strict / Base / Cancel
- Strict: Base config + Core Web Vitals (রেকমেন্ডেড)
- Base: Base config
- Cancel: কোনো কনফিগারেশন নেই
নির্বাচনের পরে eslint ও eslint-config-next ইনস্টল হবে।
এবার next lint বা build (next build) চলাকালীন ESLint চেক করবে।

১০.Absolute Imports & Path Aliases

tsconfig.json বা jsconfig.json এ baseUrl ও paths ব্যবহার করুন।
উদাহরণ:

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

কোডে ব্যবহার:

// Before
import { Button } from "../../../components/button";
 
// After
import { Button } from "@/components/button";

এভাবে কোড সুন্দর ও সহজ হয়।

Introduction Project Structure and Organization