Build Your First Next.js App

Create a New Next.js App

In your terminal, run:

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

You'll be asked a few questions. Recommended answers:

• TypeScript? Yes (it's the standard now)
• ESLint? Yes
• Tailwind CSS? Yes
• src/ directory? No (keep it simple)
• App Router? Yes
• Import alias? Default (@/*)

Then move into the folder:

cd my-next-app

Start the Development Server

Run:

npm run dev

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

Leave this terminal running — the dev server hot-reloads every change you make.

Look at the Project Structure

Open the project in VS Code. The important parts:

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

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

Edit the Homepage

Open app/page.tsx, delete everything, and paste:

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 instantly. 🎉

Add a New Page

Create a new folder app/about/ and inside it create page.tsx:

export default function About() {
    return (
        <main className="p-10">
            <h1 className="text-4xl font-bold">About Me</h1>
            <p className="mt-4 text-slate-600">
                I'm learning Next.js and this is my second page.
            </p>
        </main>
    );
}

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

Add a Shared Navbar with Layouts

Open app/layout.tsx. Inside the <body> tag, add a navbar above {children}:

import Link from 'next/link';

// ... existing imports and font config ...

<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>

Save. Now both the homepage and about page show the same navbar. That's what a layout is — UI that wraps every page in a folder.