nextjs-dev

Next.js Development

Overview

Next.js 14+ with App Router provides Server Components by default, Server Actions for mutations, and streaming for progressive rendering. Next.js 16 introduces Cache Components (use cache directive) and makes request-bound APIs async. Prefer the App Router for all new projects.

Project Structure

app/
├── layout.tsx          # Root layout (wraps all pages)
├── page.tsx            # Home page (Server Component by default)
├── error.tsx           # Error boundary ('use client' required)
├── not-found.tsx       # 404 page
├── loading.tsx         # Loading skeleton (shown during streaming)
├── globals.css         # Global styles
├── (admin)/            # Route group (no URL segment)
│   └── dashboard/
├── _internal/          # Private folder (opted out of routing)
├── features/
│   └── [id]/
│       └── page.tsx    # Dynamic route
└── api/
    └── route.ts        # API route handler

components/
├── ui/                 # Primitives (button, card, etc.)
├── layout/             # Sidebar, header, footer
└── shared/             # Reusable across pages

lib/
├── data/               # Server-side data fetching functions
├── actions/            # Server Actions ('use server')
├── types/              # TypeScript interfaces
└── utils.ts            # Formatting helpers

Route Groups: Use parentheses (e.g., (admin)) to group routes without affecting the URL path.

Private Folders: Prefix with _ (e.g., _internal) to opt out of routing and signal implementation details.

Feature Folders: For large apps, group by feature (e.g., app/dashboard/, app/auth/).

Core Patterns

Server Components (default)

// app/page.tsx — Server Component (no 'use client' directive)
export const dynamic = 'force-dynamic'; // Required when fetching from DB

import { getData } from '@/lib/data/my-data';

export default async function Page() {
  const data = await getData(); // Runs on server only

  return <div>{data.title}</div>;
}