Next.js Getting Started Cheat Sheet

A practical cheat sheet for getting started with Next.js, covering installation, project setup, routing, components, and best practices for efficient development.

💡 Key Takeaways

⚡ Project Setup: Use create-next-app with TypeScript or JavaScript.
🏗️ App Structure: App Router (app/) for modern nested layouts; page.tsx per route.
🌐 Routing: Pages map to URLs automatically; layouts wrap pages globally or nested.
🚀 Dev & Prod: next dev for development, next build && next start for production.
🧩 Best Practices: Global CSS in styles/, shared UI in layout.tsx.

1️⃣ Create a New App

Initialize with TypeScript or JavaScript
Optionally add Tailwind CSS
Choose App Router (modern) or Pages Router

npx create-next-app@latest my-app
# TypeScript version
npx create-next-app@latest my-app --typescript

2️⃣ Start the Dev Server

Navigate to project folder
Run dev server on http://localhost:3000

cd my-app
npm run dev
# or
yarn dev

3️⃣ Folder Structure (App Router)

app/ → pages and layouts
public/ → static assets
styles/ → global CSS or Tailwind files
next.config.js → project configuration

my-app/
├── app/
│   ├── page.tsx         # Home page
│   ├── layout.tsx       # Root layout
│   └── about/page.tsx   # Nested route
├── public/
├── styles/
├── next.config.js

4️⃣ Add a New Route

Create a folder under app/ for route
Add page.tsx for the route component

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

5️⃣ Add a Global Layout

Wrap pages with shared UI like header/footer
Layouts support nested routes

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

6️⃣ Build and Start Production

Create production-ready build
Start server to serve optimized pages

npm run build
npm run start

7️⃣ Quick Tips

Use next dev for development
Place global CSS in app/styles/globals.css
Use page.tsx for individual routes
Prefer App Router for server components and nested layouts