57Next.js for SDET

57.1 App Router vs Pages Router

57.2 Server vs Client Components

// app/page.tsx — Server Component by default
async function Home() {
  const users = await fetch('https://api/users').then(r => r.json());
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

// app/Cart.tsx — Client Component (interactive)
'use client';
import { useState } from 'react';
export function Cart() {
  const [items, setItems] = useState<Item[]>([]);
  return <button onClick={() => setItems([...items, newItem])}>Add</button>;
}

Server Components never ship JS to the browser. They reduce bundle size dramatically. They can't use useState, useEffect, browser-only APIs.

57.3 Data fetching modes

57.4 Route handlers

// app/api/users/route.ts
export async function GET() {
  const users = await db.user.findMany();
  return Response.json(users);
}
export async function POST(req: Request) {
  const body = await req.json();
  const u = await db.user.create({ data: body });
  return Response.json(u, { status: 201 });
}

57.5 Server Actions

// app/actions.ts
'use server';
export async function createOrder(formData: FormData) {
  const sku = formData.get('sku') as string;
  const order = await db.order.create({ data: { sku }});
  return order.id;
}

// app/CartForm.tsx
import { createOrder } from './actions';
export default function CartForm() {
  return (
    <form action={createOrder}>
      <input name="sku" />
      <button>Buy</button>
    </form>
  );
}

Server Actions are RPC-like functions you can call from client components or use as form actions. No need to write a route + client fetch.

57.6 Middleware

// middleware.ts
import { NextResponse } from 'next/server';

export function middleware(req) {
  if (!req.cookies.get('token')) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}
export const config = { matcher: ['/dashboard/:path*'] };

57.7 Testing Next.js apps

// playwright.config.ts — boot Next in CI
webServer: {
  command: 'npm run start',
  url: 'http://localhost:3000',
  reuseExistingServer: !process.env.CI,
  timeout: 120_000,
},

57.8 SDET gotchas

• Hydration mismatch — server HTML differs from first client render. Common cause: new Date(), locale-dependent formatting, window access during render.
• Cache surprises — fetch is cached by default in Server Components. Forgetting cache: 'no-store' serves stale data.
• Streaming — Suspense + streaming means parts of the page arrive late. Tests should wait for specific text, not full load.
• "use client" propagation — once you mark a component, its children must also be client-compatible. SDETs check that server-only modules aren't imported into client bundles (leaks secrets).
• Route segment config — export const dynamic, revalidate, runtime per route. Wrong choice → unexpected SSR behaviour.