Getting Started with Next.js

Next.js · Reference cheat sheet

📋 Overview

Next.js is a React framework for full-stack web apps. It adds routing, rendering modes, image optimization, and deployment conventions on top of React.

🔧 Core concepts

Create a project:

npx create-next-app@latest my-app
cd my-app
npm run dev

💡 Examples

Minimal app/page.tsx:

export default function Home() {
  return <h1>Hello Next.js</h1>;
}

package.json scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

Check version:

npx next --version

⚠️ Pitfalls

• Mixing App Router (app/) and Pages Router (pages/) without a clear plan causes confusion.
• Client hooks (useState, useEffect) need 'use client' in App Router.
• Forgetting next build before next start serves a stale or missing build.

🔗 Related

• app_router.md
• pages_router.md
• server_components.md
• deployment.md
• glossary.md