Next.js: Introduction to Next.js 16

// app/dashboard/page.tsx — Server Component Default
export default async function DashboardPage() {
  const tasks = await fetch('https://api.example.com/tasks');
  const projects = await fetch('https://api.example.com/projects');

  return (
    <div className="grid grid-cols-2 gap-4">
      <TaskSummary tasks={tasks} />
      <ProjectList projects={projects} />
    </div>
  );
}

Diagram: Next.js 16; App Router File System Routing; Rendering Engine SSR/SSG/ISR/PPR; Data Collection Server Components; API Routes Route Handlers; Build Tools Turbopack.

# 1. Usage create-next-app Create a Project(Recommendations)
npx create-next-app@latest my-next-app --ts --tailwind --app

# 2. Go to the project directory
cd my-next-app

# 3. Start the development server(Turbopack Default)
npm run dev

# 4. Excerpt from terminal output
▲  ▲  ▲  ▲  ▲  ▲
 ▲  Next.js 16.2.10 (Turbopack)
 ▲  Local:        http://localhost:3000
 ▲  Environments: .env.local

▲ Next.js 16.2.10
- Local: http://localhost:3000
✓ Ready in 876ms (Turbopack)

The development server is running at http://localhost:3000. Open this URL in a browser to see the default Next.js welcome page.

// app/page.tsx — One page = Data Collection + Rendering + Interaction
export default async function HomePage() {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/1');

  return (
    <main>
      <h1 className="text-2xl font-bold">Welcome to Next.js 16</h1>
      <p>Server-rendered content: {data.title}</p>
    </main>
  );
}

<h1>Welcome to Next.js 16</h1>
<p>Server-rendered content: sunt aut facere repellat provident</p>

Browser renders: A heading "Welcome to Next.js 16" and server-rendered content from the API — the data was fetched on the server and delivered as pre-rendered HTML.

// Pages Router Old Model (v12)
export async function getServerSideProps() {
  return { props: { data: await fetchData() } };
}
export default function Page({ data }) {
  return <div>{data}</div>; // All code is on the client side
}

// App Router New Model (v16)
export default async function Page() {
  const data = await fetchData(); // Retrieve it directly within the component
  return <div>{data}</div>; // Default Server Component
}

Renders the Page component UI.

// ============================================
// Pages Router (pages/posts/[id].tsx)
// Requires additional export getServerSideProps
// ============================================
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  return { props: { post: await res.json() } };
}
export default function PostPage({ post }) {
  return <h1>{post.title}</h1>;
}

// ============================================
// App Router (app/posts/[id]/page.tsx)
// Directly async component，No additional export required
// ============================================
export default async function PostPage({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.id}`);
  return <h1>{post.title}</h1>;
}

Pages Router: 18 lines of code (including getServerSideProps)
App Router: 8 Run the code(Directly async component)
Savings 55% Sample Code

The App Router reduces boilerplate by 55%: no getServerSideProps needed, direct async component, and automatic data fetching within the component body.

# Next.js 16 Start the development server，Use by default Turbopack
npm run dev

# Console Output
▲  ▲
▲  Next.js 16.2
▲  - Local: http://localhost:3000
▲  - Turbopack (experimental): ✓ loaded in 876ms

# Save after editing any file — Instant Hotfixes
✔ Updated /app/page.tsx in 3ms

Turbopack Start Time: 876ms
Hotfix Release Time: 3ms
Comparison Webpack Cold Start: 5-10s

Turbopack HMR: 4ms per file update (vs 50-200ms with Webpack). Cold start: 876ms (vs 5-10s). Large project builds: 10x faster overall.

// app/page.tsx — Usage use cache Instructions
import { unstable_cache as cache } from 'next/cache';

export default async function Page() {
  const data = await getData();
  return <div>{JSON.stringify(data)}</div>;
}

const getData = cache(
  async () => {
    return fetch('https://api.example.com/expensive-data');
  },
  ['expensive-data'],
  { revalidate: 3600 }
);

Fetches data and renders the result.

// ============================================
// PPR Static shell + use cache Smart Caching
// Home = Static Header + Dynamic Content Recommendations (cached 1 hour)
// ============================================

// app/page.tsx
import { Suspense } from 'react';
import { RecommendedProducts } from './RecommendedProducts';

export default function HomePage() {
  return (
    <div>
      <header className="bg-gray-100 p-4">
        <h1>Welcome to ShopHub</h1>
        <nav>Categories | Deals | Support</nav>
      </header>

      {/* PPR Boundary:Dynamic Content Recommendations */}
      <Suspense fallback={<div className="animate-pulse h-40 bg-gray-200" />}>
        <RecommendedProducts />
      </Suspense>
    </div>
  );
}

Renders a static shell immediately, with dynamic content loading inside Suspense boundaries.
Visible text: Welcome to ShopHub | Categories | Deals | Support

// app/RecommendedProducts.tsx
import { unstable_cache as cache } from 'next/cache';

const getProducts = cache(
  async () => {
    return fetch('https://fakestoreapi.com/products?limit=4');
  },
  ['recommended-products'],
  { revalidate: 3600 }
);

export async function RecommendedProducts() {
  const products = await getProducts();
  return (
    <div className="grid grid-cols-4 gap-4 p-4">
      {products.map(p => (
        <div key={p.id} className="border rounded p-2">
          <img src={p.image} alt={p.title} className="h-32" />
          <p className="font-bold">{p.title}</p>
          <p>${p.price}</p>
        </div>
      ))}
    </div>
  );
}

When the page loads:
1. Static Header(Navigation Bar)Show Now
2. Recommended Area Display Skeleton Screen(Gray Placeholder Animation)
3. Once the data is ready，4 Streaming Rendering of Product Cards
4. The same user 1 Repeated visits within an hour are served from the cache，No need to restart fetch

The page renders as described above, with the UI updating based on the described behavior.

// ============================================
// Server Action:Form submission directly calls a backend function
// No need to create them manually API Route
// ============================================

// app/contact/page.tsx
export default function ContactPage() {
  async function handleSubmit(formData) {
    'use server';
    const name = formData.get('name');
    const email = formData.get('email');
    // Write directly to the database or send an email
    console.log(`New contact: ${name} <${email}>`);
    // Redirect to the success page
    redirect('/contact/success');
  }

  return (
    <form action={handleSubmit}>
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="Your email" required />
      <button type="submit">Send</button>
    </form>
  );
}

A form with input fields and a submit button.
On submit, the server action processes the data and redirects to a success page.

After the form is submitted:
1. handleSubmit Functions are executed on the server
2. formData Automatically Collect Form Fields
3. redirect Execution Server 303 Redirect
4. No coding required API Route / fetch Code

// ============================================
// Comprehensive Example:E-commerce Product Detail Page
// Features:SSG Static Directory + PPR Recommendations + ISR Comments
// ============================================

// app/products/[id]/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';

// Static Page Parameter Generation(Pre-generate during build)
export async function generateStaticParams() {
  const products = await fetch('https://fakestoreapi.com/products');
  const ids = await products.json();
  return ids.map(p => ({ id: String(p.id) }));
}

export default async function ProductPage({ params }) {
  const product = await fetch(
    `https://fakestoreapi.com/products/${params.id}`
  );

  if (!product) {
    notFound();
  }

  return (
    <div className="container mx-auto p-4">
      {/* Static Section:Basic Product Information */}
      <div className="flex gap-8">
        <img src={product.image} alt={product.title} className="w-64 h-64" />
        <div>
          <h1 className="text-2xl font-bold">{product.title}</h1>
          <p className="text-xl text-green-600">${product.price}</p>
          <p className="mt-4">{product.description}</p>
        </div>
      </div>

      {/* PPR Dynamic Boundary:Recommended Products */}
      <Suspense fallback={<div>Loading recommendations...</div>}>
        <Recommendations category={product.category} />
      </Suspense>

      {/* ISR Comments Section:Regenerate every hour */}
      <Suspense fallback={<div>Loading reviews...</div>}>
        <Reviews productId={params.id} />
      </Suspense>
    </div>
  );
}

// app/products/[id]/Recommendations.tsx
async function Recommendations({ category }) {
  const products = await fetch(
    `https://fakestoreapi.com/products/category/${category}`
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">Recommended Products</h2>
      <div className="grid grid-cols-4 gap-4 mt-4">
        {products.slice(0, 4).map(p => (
          <div key={p.id} className="border p-2 rounded">{p.title}</div>
        ))}
      </div>
    </div>
  );
}

// app/products/[id]/Reviews.tsx
async function Reviews({ productId }) {
  const reviews = await fetch(
    `https://api.example.com/reviews/${productId}`,
    { next: { revalidate: 3600 } }
  );
  return (
    <div className="mt-8">
      <h2 className="text-xl font-bold">Customer Reviews</h2>
      {reviews.map(r => (
        <div key={r.id} className="border-b py-2">
          <p className="font-bold">{r.author}</p>
          <p>{r.content}</p>
        </div>
      ))}
    </div>
  );
}

1. Product Basic Information Displayed Instantly(SSG Static HTML)
2. Recommended Areas Display "Loading recommendations..." Placeholder
3. Comments Section Display "Loading reviews..." Placeholder
4. Streaming Rendering of Recommended Content(PPR)
5. Cached comment content 1 Update as needed after X hours(ISR)
6. The entire page is complete SEO Metadata