Next.js Installation

Next.js Installation: Setting Up Your First Project

Next.js installation takes less than two minutes using the official create-next-app command-line tool. Before starting, install Node.js 18.18 or newer on your computer.

The CLI wizard creates a ready workspace with TypeScript, ESLint, Tailwind CSS, and the App Router already wired together. You do not need to configure Webpack or Babel by hand.

Step 1: Run the CLI Installer

Open your terminal, move to your projects folder, and run the scaffold command. Answer the prompts to choose your project name and defaults.

npx create-next-app@latest store-dashboard

Accepting the recommended options sets up a modern App Router project with TypeScript and Tailwind CSS enabled:

What is your project named? store-dashboard
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like your code inside a `src/` directory? No
Would you like to use App Router? Yes
Would you like to customize the import alias (@/*)? Yes

Step 2: Inspect the Project Structure

After installation finishes, inspect the generated folders to know where routes, styles, and static assets belong.

store-dashboard/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.ts
├── package.json
└── tsconfig.json

The app/ folder holds your routes and layouts. The public/ folder stores static files like logos and icons. The next.config.ts file holds framework settings such as image domains.

Step 3: Start the Development Server

Move into the new folder and start the local development server with hot reload enabled.

cd store-dashboard
npm run dev

Visit http://localhost:3000 in your browser. Update app/page.tsx to verify live reloading works:

// app/page.tsx
export default function HomePage() {
  return (
    <main className="min-h-screen flex flex-col items-center justify-center p-6">
      <h2 className="text-3xl font-bold">Next.js Setup Complete</h2>
      <p className="mt-2 text-gray-600">Edit app/page.tsx to build your first page.</p>
    </main>
  );
}

Common Mistakes

• Running an outdated Node.js version: Older Node.js releases fail during install or build; verify your version with node -v first.
• Choosing Pages Router by mistake: Select Yes for App Router so you get app/layout.tsx and Server Components.
• Editing files inside .next/: The .next/ directory stores generated build output and should never be edited or committed to Git.

Frequently Asked Questions

What Node.js version does Next.js require?

Modern Next.js requires Node.js 18.18 or higher, though using the latest Active LTS release such as Node 20 or 22 is best.

Should I enable TypeScript during Next.js installation?

Yes, TypeScript catches missing props, invalid route params, and API shape bugs in your editor before deployment.

What is the @/* import alias used for?

The @/* alias lets you write clean imports like @/components/Header instead of long relative paths like ../../../components/Header.