Next.js: key features and practical examples

Why Next.js

• Hybrid rendering (SSG, SSR, ISR) plus file-based routing.

• Built-in optimizations (image, font, code-splitting).

• Support for React Server Components and an App Router for nested layouts.

• Edge runtime, middleware, and fast dev builds (Turbopack beta).

Core features with short examples

1. App Router & Server vs Client components

• Files live under /app. Components are Server Components by default; opt into client behavior with "use client".

Server component (default):

// app/page.tsx
export default async function Page() {
  const res = await fetch('https://api.example.com/posts', { next: { revalidate: 60 }});
  const posts = await res.json();
  return (
    <main>
      <h1>Posts</h1>
      <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </main>
  );
}

Client component:

// app/components/Counter.tsx
'use client'
import { useState } from 'react';
export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

1. Routing, layouts, and nested UI

• Create shared layouts with app/layout.tsx and nested folders to scope UI (headers, sidebars, loading states).

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html><body><header>Site</header>{children}</body></html>;
}

1. Data fetching strategies: SSG, SSR, ISR

• ISR (revalidate) in App Router:

export const revalidate = 60; // regenerate every 60s

• Force dynamic (SSR):

export const dynamic = 'force-dynamic';

1. Route Handlers (API routes in App Router)

// app/api/hello/route.ts
export async function GET() {
  return new Response(JSON.stringify({ hello: 'world' }), { status: 200 });
}

1. Middleware & Edge runtime

• Middleware runs at the edge for rewrites/auth checks.

// middleware.ts
import { NextResponse } from 'next/server';
export function middleware(req) {
  const url = req.nextUrl.clone();
  if (!req.cookies.get('token')) url.pathname = '/login';
  return NextResponse.rewrite(url);
}
export const config = { matcher: ['/dashboard/:path*'] };

• Edge API route:

// app/api/ping/route.ts
export const runtime = 'edge';
export function GET() { return new Response('pong'); }

1. Image & font optimization

• next/image automatic optimization:

import Image from 'next/image';
<Image src="/avatar.jpg" width={80} height={80} alt="avatar" />;

• Built-in next/font for performance-safe fonts (no CLS from external links).

1. Developer experience & performance

• Turbopack (fast dev bundler, experimental/opt-in).

• Built-in analytics, ESLint/TypeScript integration, and zero-config for many optimizations.

• Incremental adoption: pages/ and app/ routers can coexist, easing migration.

Advanced / experimental

• Server Actions (experimental): server-side event handlers invoked from client components.

• React Server Components enable sending less JS to the client, improving TTFB and bundle size.

Wrap-up Next.js is a full-stack React framework that emphasizes performance and developer ergonomics via server components, flexible rendering modes, edge capabilities, and file-based routing. The App Router and Server Components are the most significant shifts—favor server-first rendering and use client components only where interactivity is needed.