Complete Next.js Developer Guide

import { cacheLife } from "next/cache";
 
export default async function HomePage() {
  "use cache";
  cacheLife("hours");
 
  const data = await fetch("https://api.example.com/data");
  const posts: { id: number; title: string; excerpt: string }[] =
    await data.json();
 
  return (
    <main>
      <h1>Welcome to Next.js</h1>
      <div className="grid grid-cols-3 gap-4">
        {posts.map((post) => (
          <article key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.excerpt}</p>
          </article>
        ))}
      </div>
    </main>
  );
}

// app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
 
const inter = Inter({ subsets: ["latin"] });
 
export const metadata: Metadata = {
  title: "My Next.js App",
  description: "Built with Next.js 16",
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <nav className="border-b">
          <div className="container mx-auto px-4 py-4">
            <h2>My App</h2>
          </div>
        </nav>
        <main>{children}</main>
      </body>
    </html>
  );
}

Root Layout (app/layout.tsx)
├── Auth Group Layout ((auth)/layout.tsx)
│   └── Auth Pages (/auth/login, /auth/register, etc.)
├── Dashboard Group Layout ((dashboard)/layout.tsx)
│   └── Dashboard Pages (/dashboard, /dashboard/analytics, etc.)
├── Marketing Group Layout ((marketing)/layout.tsx)
│   └── Marketing Pages (/about, /contact, /pricing, /privacy, /terms)
├── Blog Layout (blog/layout.tsx)
│   └── Blog Pages (/blog, /blog/[slug])
└── Home Page (/)

// app/layout.tsx - Root Layout
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Navigation />
        {children}
        <Footer />
      </body>
    </html>
  );
}

// app/(auth)/layout.tsx - Auth Group Layout
export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen bg-gray-50">
      <AuthHeader />
      <main className="flex items-center justify-center py-12">
        <div className="w-full max-w-md">{children}</div>
      </main>
    </div>
  );
}

// app/(dashboard)/layout.tsx - Dashboard Group Layout
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex h-screen">
      <DashboardSidebar />
      <div className="flex flex-1 flex-col">
        <DashboardHeader />
        <main className="flex-1 p-6">{children}</main>
      </div>
    </div>
  );
}

// app/(marketing)/layout.tsx - Marketing Group Layout
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen">
      <MarketingHeader />
      <main>{children}</main>
      <MarketingFooter />
    </div>
  );
}

// app/blog/[slug]/page.tsx
import { getPost, getPosts } from "@/lib/posts";
 
// Prerender every known post at build time.
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}
 
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
 
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

import Link from "next/link";
 
export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/blog">Blog</Link>
      <Link href="/about">About</Link>
    </nav>
  );
}

// Not cached: runs on every request
async function getData() {
  const res = await fetch("https://api.example.com/posts");
  return res.json();
}
 
export default async function Page() {
  const posts = await getData();
  return <PostList posts={posts} />;
}

import { cacheLife } from "next/cache";
 
// Cache the result and revalidate it every hour
async function getData() {
  "use cache";
  cacheLife("hours");
 
  const res = await fetch("https://api.example.com/posts");
  return res.json();
}

import { Suspense } from "react";
 
async function PostList() {
  const res = await fetch("https://api.example.com/posts");
  const posts: { id: number; title: string }[] = await res.json();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
 
export default function Page() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <PostList />
      </Suspense>
    </div>
  );
}

export default function Button() {
  return (
    <button className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700">
      Click me
    </button>
  );
}

/* components/Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

// components/Button.tsx
import styles from "./Button.module.css";
 
export default function Button() {
  return <button className={styles.button}>Click me</button>;
}

import Image from "next/image";
 
export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={1200}
      height={600}
      preload
    />
  );
}

import { Inter, Roboto_Mono } from "next/font/google";
 
const inter = Inter({ subsets: ["latin"] });
const robotoMono = Roboto_Mono({
  subsets: ["latin"],
  variable: "--font-roboto-mono",
});
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${inter.className} ${robotoMono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

# Or deploy via CLI
npm i -g vercel
vercel

# Build for production
npm run build
 
# Start production server
npm start