Install Node.js & Create Next.js App

Tools you need

Next.js runs on Node.js, the program that runs JavaScript outside the browser. Installing Node also gives you npm (package manager) and npx (run a package once).

Step 1: Install Node.js

1. Open nodejs.org and download the LTS version for your system (Windows, macOS or Linux).
2. Run the installer and keep the default options (make sure "Add to PATH" stays ticked on Windows).
3. Open a new terminal (Command Prompt, PowerShell or Terminal) and check:

node -v
npm -v

Step 2: Install VS Code

Download Visual Studio Code from code.visualstudio.com. Useful extensions: ES7+ React snippets, Prettier (auto-format) and ESLint (shows mistakes).

Step 3: Create the app

Open a terminal in the folder where you keep projects (for example D:\projects) and run:

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

Want the defaults without questions? Add --yes at the end. The defaults turn on TypeScript, Tailwind CSS, ESLint and the App Router.

The create-next-app questions

For this course choose customize settings and answer like this:

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

The tool now downloads Next.js, React and React DOM and creates a folder my-first-app.

Step 4: Run the development server

cd my-first-app
npm run dev

Open http://localhost:3000 in your browser — you will see the Next.js welcome page. The Network address lets you open the site on your phone if it is on the same Wi-Fi.

Step 5: Change the home page

Open the folder in VS Code (code .), open app/page.js, delete everything and 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>
  )
}

Save the file. The browser updates instantly without a reload — this is called Fast Refresh.

npm scripts: dev, build, start

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

In Next.js 16, Turbopack is used automatically for both dev and build, so you no longer write --turbopack.

Common errors and fixes

• 'node' is not recognized — Node is not on PATH. Reinstall Node and open a new terminal.
• "Node.js version ... is required" — your Node is too old. Install the latest LTS.
• Port 3000 is in use — stop the other server (Ctrl + C) or run npm run dev -- -p 3001.
• Project name with capital letters or spaces — npm package names must be lowercase, e.g. my-first-app.
• Editing the wrong file — with the App Router the home page is app/page.js, not pages/index.js.

Summary

• Install Node.js 20.9+ and VS Code.
• Create a project with npx create-next-app@latest.
• Run npm run dev and open localhost:3000.
• app/page.js is the home page; saving updates the browser instantly.