Before installing Next.js, ensure you have:

Check your Node version:

node --version   # Should show v18.17.0 or higher
npm --version    # Should show 9.x or higher

If you don’t have Node.js, install it from nodejs.org.

Recommended: Use a version manager

# Install nvm (Node Version Manager) on macOS/Linux
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Install and use the latest LTS
nvm install --lts
nvm use --lts

# On Windows, use nvm-windows or fnm
winget install Schniz.fnm
fnm install --lts
fnm use lts-latest

npx create-next-app@latest my-app

yarn create next-app my-app

pnpm create next-app my-app

bunx create-next-app my-app

When you run the command, you’ll be asked:

What is your project named? › my-app
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? (recommended) › Yes ✓
Would you like to use Turbopack for `next dev`? › Yes ✓
Would you like to customize the import alias (@/*)? › No

Best Practice: Always say Yes to TypeScript, App Router, and ESLint for any serious project.

Next.js has first-class TypeScript support. Choosing TypeScript generates .tsx/.ts files and a tsconfig.json. TypeScript catches bugs at compile time before they reach production.

ESLint is a linter that enforces code quality rules. Next.js ships with eslint-config-next, which includes rules specific to Next.js like requiring <Image> instead of <img>.

Tailwind is a utility-first CSS framework. Next.js sets it up with tailwind.config.ts and postcss.config.js automatically.

The App Router (introduced in Next.js 13) uses React Server Components by default. It lives inside the app/ folder. Always choose App Router for new projects — the older Pages Router is legacy.

Turbopack is Next.js’s new Rust-based bundler, replacing Webpack. It’s significantly faster for development. Stable as of Next.js 15.

cd my-app
npm run dev      # Start dev server at http://localhost:3000

With Turbopack (default in v15):

npm run dev      # Automatically uses Turbopack

npm run build

This generates:

• Optimized JavaScript bundles
• Prerendered HTML for static pages
• Server bundles for dynamic routes

npm start         # Serves the production build locally

After running create-next-app, you’ll see:

my-app/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx       ← Root layout (wraps all pages)
│   └── page.tsx         ← Home page (renders at /)
├── public/
│   ├── next.svg
│   └── vercel.svg
├── .eslintrc.json       ← ESLint configuration
├── .gitignore           ← Git ignored files
├── next.config.ts       ← Next.js configuration
├── package.json         ← Dependencies and scripts
├── postcss.config.mjs   ← PostCSS for Tailwind
├── tailwind.config.ts   ← Tailwind configuration
└── tsconfig.json        ← TypeScript configuration

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Enable React strict mode for catching bugs early
  reactStrictMode: true,

  // Configure allowed image domains
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "example.com",
      },
    ],
  },
};

export default nextConfig;

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "strict": true,          // Enable all strict type checks
    "paths": {
      "@/*": ["./*"]         // Import alias: @/components = ./components
    }
  }
}

Beginner:

1. What is the minimum Node.js version required for Next.js 14+?
2. What does npm run build do differently from npm run dev?
3. What is the App Router and when was it introduced?

Intermediate: 4. What is Turbopack and how does it differ from Webpack? 5. Explain the role of next.config.ts in a Next.js project. 6. What is the significance of reactStrictMode: true?

Advanced: 7. How would you configure Next.js to support multiple environments (dev/staging/prod)? 8. Explain how tsconfig.json path aliases improve code maintainability in large projects.