Next.js Lesson 2: Setup & App Router

Let’s create a Next.js app. The App Router (introduced in Next.js 13) is the modern way — it uses server components by default and co-locates everything.

# Create a new Next.js app
npx create-next-app@latest my-next-app
# Select: TypeScript? Yes
# Select: ESLint? Yes  
# Select: Tailwind CSS? Yes
# Select: App Router? Yes
# Select: src/ directory? Yes (optional)

cd my-next-app
npm run dev
# Open: http://localhost:3000

App Router Structure

my-next-app/
├── app/                  # App Router (new way)
│   ├── layout.tsx        # root layout (wraps everything)
│   ├── page.tsx          # home page (/)
│   ├── globals.css
│   └── about/
│       └── page.tsx      # about page (/about)
├── public/               # static files
├── next.config.js        # Next.js config
└── package.json

Your First Pages

// app/page.tsx — home page
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
      <p>This is the home page.</p>
    </main>
  );
}

// app/about/page.tsx — /about route
export default function AboutPage() {
  return <h1>About Us</h1>;
}

// Just create a folder + page.tsx = a new route!