Node.js install करें और Next.js App बनाएँ

ज़रूरी tools

Next.js Node.js पर चलता है — यह वह program है जो browser के बाहर JavaScript चलाता है। Node install करने पर npm (package manager) और npx (package एक बार चलाने के लिए) भी मिल जाते हैं।

Step 1: Node.js install करें

1. nodejs.org खोलें और अपने system (Windows, macOS या Linux) के लिए LTS version download करें।
2. Installer चलाएँ और default options रहने दें (Windows पर "Add to PATH" tick रहना चाहिए)।
3. नया terminal (Command Prompt, PowerShell या Terminal) खोलकर check करें:

node -v
npm -v

Step 2: VS Code install करें

code.visualstudio.com से Visual Studio Code download करें। काम के extensions: ES7+ React snippets, Prettier (auto-format) और ESLint (गलतियाँ दिखाता है)।

Step 3: App बनाइए

जिस folder में projects रखते हैं (जैसे D:\projects), वहाँ terminal खोलकर चलाइए:

npx create-next-app@latest my-first-app

बिना सवालों के defaults चाहिए? आख़िर में --yes जोड़ दें। Defaults में TypeScript, Tailwind CSS, ESLint और App Router चालू होते हैं।

create-next-app के सवाल

इस course के लिए customize settings चुनें और ऐसे जवाब दें:

What is your project named? my-first-app
Would you like to use the recommended Next.js defaults?
    Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, AGENTS.md
    No, reuse previous settings
  > No, customize settings - Choose your own preferences

Would you like to use TypeScript?                    No
Which linter would you like to use?                  ESLint
Would you like to use React Compiler?                No
Would you like to use Tailwind CSS?                  No
Would you like your code inside a `src/` directory?  No
Would you like to use App Router? (recommended)      Yes
Would you like to customize the import alias?        No   (keeps @/*)
Would you like to include AGENTS.md ...?             Yes

अब tool Next.js, React और React DOM download करके my-first-app folder बना देता है।

Step 4: Development server चलाइए

cd my-first-app
npm run dev

Browser में http://localhost:3000 खोलिए — Next.js का welcome page दिखेगा। Network वाला address उसी Wi-Fi पर phone में site खोलने देता है।

Step 5: Home page बदलिए

Folder को VS Code में खोलें (code .), app/page.js खोलें, सब delete करके यह paste करें:

// app/page.js — replace everything with this
export default function Home() {
  return (
    <main style={{ padding: 40, fontFamily: 'sans-serif' }}>
      <h1>Hello Next.js 👋</h1>
      <p>My first page. Today is {new Date().toDateString()}.</p>
    </main>
  )
}

File save करें। Browser बिना reload के तुरंत update हो जाता है — इसे Fast Refresh कहते हैं।

npm scripts: dev, build, start

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

Next.js 16 में dev और build दोनों के लिए Turbopack अपने-आप use होता है, इसलिए अब --turbopack लिखने की ज़रूरत नहीं।

आम errors और समाधान

• 'node' is not recognized — Node PATH में नहीं है। Node दोबारा install करें और नया terminal खोलें।
• "Node.js version ... is required" — Node पुराना है। Latest LTS install करें।
• Port 3000 is in use — दूसरा server रोकें (Ctrl + C) या npm run dev -- -p 3001 चलाएँ।
• Project name में capital letters या spaces — npm package नाम lowercase होने चाहिए, जैसे my-first-app।
• गलत file edit करना — App Router में home page app/page.js है, pages/index.js नहीं।

सारांश

• Node.js 20.9+ और VS Code install करें।
• npx create-next-app@latest से project बनाएँ।
• npm run dev चलाकर localhost:3000 खोलें।
• app/page.js home page है; save करते ही browser update होता है।