How to Create a Next.js App

Run create-next-app

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

You'll be asked a series of questions. Recommended answers:

✔ 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 use Turbopack? … Yes
✔ Would you like to customise the import alias? … No

The CLI installs dependencies and creates the full project structure. Takes 30–60 seconds.

Start the Dev Server

cd my-next-app
npm run dev

Open http://localhost:3000 in your browser. You should see the default Next.js welcome page.

The dev server hot-reloads every change instantly — no refresh needed.

Understand the Project Structure

my-next-app/
├── app/
│   ├── layout.tsx       Shared layout (navbar, footer)
│   ├── page.tsx         Homepage (/)
│   ├── globals.css      Global styles
│   └── favicon.ico
├── public/              Static files
├── package.json
├── next.config.ts
└── tsconfig.json

Everything in app/ becomes a route. app/page.tsx is /. That's the entire routing rule.

Edit the Homepage

Open app/page.tsx and replace it with:

export default function Home() {
    return (
        <main className="p-10">
            <h1 className="text-4xl font-bold">
                Hello from Next.js!
            </h1>
            <p className="mt-4 text-slate-600">
                This is my first Next.js page.
            </p>
        </main>
    );
}

Save — your browser updates automatically.

Add a New Page

Create app/about/page.tsx:

export default function About() {
    return (
        <main className="p-10">
            <h1 className="text-4xl font-bold">About</h1>
            <p className="mt-4">This is my second page.</p>
        </main>
    );
}

Save and visit http://localhost:3000/about. You just created a route by creating a file.

Add a Navbar with Link

Edit app/layout.tsx and add inside <body>:

import Link from 'next/link';

<body>
    <nav className="p-4 border-b flex gap-6">
        <Link href="/" className="font-bold">Home</Link>
        <Link href="/about" className="font-bold">About</Link>
    </nav>
    {children}
</body>

Both pages now share the same navbar. That's what a layout is — UI that wraps every page in a folder.