# 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):

```tsx
// 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:

```tsx
// 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>;
}
```

2.  Routing, layouts, and nested UI
    

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

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

3.  Data fetching strategies: SSG, SSR, ISR
    

*   ISR (revalidate) in App Router:
    

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

*   Force dynamic (SSR):
    

```tsx
export const dynamic = 'force-dynamic';
```

4.  Route Handlers (API routes in App Router)
    

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

5.  Middleware & Edge runtime
    

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

```ts
// 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:
    

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

6.  Image & font optimization
    

*   next/image automatic optimization:
    

```tsx
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).
    

7.  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.