belos-street/nextjs

Next.js - The React Framework for the Web

Basics

• SSR vs SSG vs ISR concepts → See basics
• App Router vs Pages Router → See basics
• Directory structure → See basics
• Routing fundamentals → See basics

App Router

• Layouts and nesting → See app-router
• Pages and routing → See app-router
• Loading and error states → See app-router
• Server vs Client Components → See app-router
• Route handlers (API) → See app-router
• Middleware → See app-router

Data Fetching

• fetch API and caching → See data-fetching
• Server Components data → See data-fetching
• Server Actions → See data-fetching
• Parallel and sequential fetching → See data-fetching

Rendering

• Server Components → See rendering
• Client Components → See rendering
• Streaming and Suspense → See rendering
• Partial Prerendering → See rendering

Styling

• CSS Modules → See styling
• Tailwind CSS → See styling
• Global CSS → See styling

API & Backend

• Route Handlers → See api-backend
• Headers and Cookies → See api-backend
• Server Actions → See api-backend

Performance

• Image optimization → See performance
• Font optimization → See performance
• Code splitting → See performance
• Prefetching → See performance

Deployment

• Vercel deployment → See deployment
• Docker deployment → See deployment
• Static export → See deployment

Security

• Authentication (NextAuth.js) → See security
• Authorization and RBAC → See security
• XSS prevention → See security
• CSRF protection → See security
• Server Actions security → See security
• API route security → See security

Quick Start

npx create-next-app@latest my-app --typescript --tailwind --eslint

cd my-app
npm run dev

Key Features

• App Router: New filesystem-based routing
• Server Components: Default rendering on server
• Streaming: Suspense for progressive loading
• Data Cache: Intelligent caching by default
• Middleware: Edge middleware for routing
• TypeScript: First-class TypeScript support

Project Structure

app/
├── layout.tsx      # Root layout
├── page.tsx        # Home page
├── globals.css     # Global styles
├── (marketing)/    # Route group
│   └── about/
│       └── page.tsx
├── blog/
│   ├── page.tsx
│   └── [slug]/
│       └── page.tsx
└── api/
    └── route.ts   # API route