Next.js Getting Started Cheat Sheet

1. Create a New App

npx create-next-app@latest my-app
# or with TypeScript:
npx create-next-app@latest my-app --typescript

Follow the prompts to choose:

TypeScript or JS
Tailwind CSS (optional)
App Router vs Pages Router

2. Start the Dev Server

cd my-app
npm run dev
# or
yarn dev

App runs at http://localhost:3000

3. Folder Structure (App Router)

my-app/
├── app/
│   ├── page.tsx         # Home page
│   ├── layout.tsx       # Root layout (shared across pages)
│   └── other-page/
│       └── page.tsx     # Nested route
├── public/              # Static assets
├── styles/              # CSS / Tailwind files
├── next.config.js       # Project config

4. Add a New Route

// app/about/page.tsx
export default function About() {
  return <h1>About Page</h1>;
}

→ Accessible at /about

5. Add a Global Layout

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

6. Build and Export

npm run build     # Production build
npm run start     # Start production server