Next.js 15 From Scratch

Requirements

To start developing with Next.js 15, you need:

• Node.js v18.17+ (LTS recommended) — nodejs.org
• VS Code — code.visualstudio.com
• Git (optional but recommended)

Check Your Node Version

node -v    # should print v20.x or higher
npm -v     # should print 10.x or higher

Create a New Project

npx create-next-app@latest my-app

The setup wizard will ask:

✔ Would you like to use TypeScript? › Yes   (recommended)
✔ Would you like to use ESLint? › Yes
✔ Would you like to use Tailwind CSS? › Yes  (recommended)
✔ Would you like your code inside a `src/` directory? › No
✔ Would you like to use App Router? (recommended) › Yes  ← IMPORTANT
✔ Would you like to use Turbopack? › Yes
✔ Would you like to customize the import alias? › No

Project File Structure

my-app/
├── app/                    ← App Router folder
│   ├── layout.tsx          ← Root layout (shared across all pages)
│   ├── page.tsx            ← Home page (/)
│   └── globals.css         ← Global styles
├── public/                 ← Static files (images, favicon)
├── components/             ← Reusable components
├── next.config.ts          ← Next.js configuration
├── tailwind.config.ts      ← Tailwind configuration
├── tsconfig.json           ← TypeScript configuration
└── package.json

Start the Dev Server

cd my-app
npm run dev

Open http://localhost:3000 in your browser to see your app.

VS Code Extensions

• ES7+ React/Redux/React-Native snippets — quick code templates
• Tailwind CSS IntelliSense — autocomplete
• Prettier — code formatting
• GitLens — Git integration

Make Your First Change

Open app/page.tsx and replace it with:

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Hello, Next.js 15! 🚀
      </h1>
    </main>
  );
}

Save the file — the browser updates automatically (HMR - Hot Module Replacement).