Testing and Deployment

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";

export function QuantityPicker({ max = 3 }: { max?: number }) {
  const [qty, setQty] = useState(1);
  const router = useRouter();

  return (
    <div>
      <button onClick={() => setQty((q) => Math.max(1, q - 1))}>−</button>
      <output aria-label="Quantity">{qty}</output>
      <button onClick={() => setQty((q) => Math.min(max, q + 1))} disabled={qty === max}>
        +
      </button>
      <button onClick={() => router.push(`/cart?qty=${qty}`)}>Go to cart</button>
    </div>
  );
}

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react @testing-library/dom @testing-library/user-event

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: { tsconfigPaths: true }, // "@/…" imports, as in tsconfig.json
  test: {
    environment: "jsdom",
    include: ["__tests__/**/*.test.{ts,tsx}"], // keep Playwright's e2e/ folder out
  },
});

import { expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import { QuantityPicker } from "@/components/quantity-picker";

test("renders without a router", () => {
  render(<QuantityPicker />);
  expect(screen.getByLabelText("Quantity").textContent).toBe("1");
});

 FAIL  __tests__/naive-picker.test.tsx > renders without a router
Error: invariant expected app router to be mounted
 ❯ useRouter node_modules/next/src/client/components/navigation.ts:169:11
 ❯ QuantityPicker src/components/quantity-picker.tsx:8:18
      6| export function QuantityPicker({ max = 3 }: { max?: number }) {
      7|   const [qty, setQty] = useState(1);
      8|   const router = useRouter();
       |                  ^

import Link from "next/link";
import { QuantityPicker } from "@/components/quantity-picker";

export default function Home() {
  return (
    <main>
      <h1>Mug</h1>
      <QuantityPicker max={3} />
      <Link href="/products">All products</Link>
    </main>
  );
}

import { expect, test, vi } from "vitest";
import { render, screen } from "@testing-library/react";
import Home from "@/app/page";

vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));

test("a synchronous Server Component renders like any component", () => {
  render(<Home />);
  expect(screen.getByRole("heading", { level: 1, name: "Mug" })).toBeDefined();
  expect(screen.getByRole("link", { name: "All products" }).getAttribute("href")).toBe("/products");
});

import { getProducts } from "@/lib/products";
import { formatPrice } from "@/lib/price";

export default async function ProductsPage() {
  const products = await getProducts();
  return (
    <main>
      <h1>Products</h1>
      <ul>
        {products.map((p) => (
          <li key={p.id}>
            {p.name}: {formatPrice(p.priceCents)}
          </li>
        ))}
      </ul>
    </main>
  );
}

export type Product = { id: string; name: string; priceCents: number };

export async function getProducts(): Promise<Product[]> {
  "use cache";
  // Stands in for a database query
  return [
    { id: "mug", name: "Mug", priceCents: 1200 },
    { id: "tee", name: "T-shirt", priceCents: 2500 },
  ];
}

export function formatPrice(cents: number, currency = "CAD"): string {
  return new Intl.NumberFormat("en-CA", { style: "currency", currency }).format(cents / 100);
}

import { expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import ProductsPage from "@/app/products/page";

test("renders an async Server Component like a client one", async () => {
  render(<ProductsPage />);
  expect(await screen.findByText("Mug: $12.00")).toBeDefined();
});

stderr | __tests__/naive-products.test.tsx > renders an async Server Component like a client one
<ProductsPage> is an async Client Component. Only Server Components can be async at the moment. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

stderr | __tests__/naive-products.test.tsx > renders an async Server Component like a client one
A component suspended inside an `act` scope, but the `act` call was not awaited. When testing React components that depend on asynchronous data, you must await the result:

 FAIL  __tests__/naive-products.test.tsx > renders an async Server Component like a client one
TestingLibraryElementError: Unable to find an element with the text: Mug: $12.00. …

<body>
  <div />
</body>

import { expect, test } from "vitest";
import { render, screen } from "@testing-library/react";
import ProductsPage from "@/app/products/page";
import { Greeting } from "@/components/greeting";

test("await the async component yourself, then render its output", async () => {
  render(await ProductsPage());
  expect(screen.getByText("Mug: $12.00")).toBeDefined();
});

test("request APIs have no request to read in a unit test", async () => {
  await expect(Greeting()).rejects.toThrow("`cookies` was called outside a request scope");
});

import { cookies } from "next/headers";

export async function Greeting() {
  const user = (await cookies()).get("user")?.value ?? "guest";
  return <p>Hello, {user}</p>;
}

import { formatPrice } from "@/lib/price";

export function GET(request: Request) {
  const cents = Number(new URL(request.url).searchParams.get("cents"));
  if (!Number.isInteger(cents) || cents < 0) {
    return Response.json({ error: "cents must be a whole number" }, { status: 400 });
  }
  return Response.json({ formatted: formatPrice(cents) });
}

"use server";

import { updateTag } from "next/cache";

export async function renameProduct(formData: FormData) {
  const name = String(formData.get("name") ?? "").trim();
  if (name.length < 2) return { error: "Name is too short" };
  // ...save to the database here...
  updateTag("products");
  return { ok: true, name };
}

import { expect, test, vi } from "vitest";
import { updateTag } from "next/cache";
import { GET } from "@/app/api/price/route";
import { renameProduct } from "@/app/actions";

vi.mock("next/cache", () => ({ updateTag: vi.fn() }));

test("a Route Handler is a function from Request to Response", async () => {
  const ok = GET(new Request("http://test/api/price?cents=1200"));
  expect(ok.status).toBe(200);
  expect(await ok.json()).toEqual({ formatted: "$12.00" });

  const bad = GET(new Request("http://test/api/price?cents=abc"));
  expect(bad.status).toBe(400);
});

test("a Server Action is an async function you can call", async () => {
  const form = new FormData();
  form.set("name", "Big mug");
  expect(await renameProduct(form)).toEqual({ ok: true, name: "Big mug" });
  expect(updateTag).toHaveBeenCalledWith("products");

  form.set("name", "x");
  expect(await renameProduct(form)).toEqual({ error: "Name is too short" });
});

import { Suspense } from "react";

async function Quantity({ searchParams }: Pick<PageProps<"/cart">, "searchParams">) {
  const { qty = "0" } = await searchParams; // request-time data: inside <Suspense>
  return <p>Items in cart: {qty}</p>;
}

export default function CartPage({ searchParams }: PageProps<"/cart">) {
  return (
    <main>
      <h1>Cart</h1>
      <Suspense fallback={<p>Loading cart…</p>}>
        <Quantity searchParams={searchParams} />
      </Suspense>
    </main>
  );
}

import { Suspense } from "react";
import { Greeting } from "@/components/greeting";

export default function AccountPage() {
  return (
    <main>
      <h1>Account</h1>
      <Suspense fallback={<p>…</p>}>
        <Greeting />
      </Suspense>
    </main>
  );
}

Route (app)      Revalidate  Expire
┌ ○ /
├ ○ /_not-found
├ ◐ /account
├ ƒ /api/price
├ ◐ /cart
└ ○ /products           15m      1y


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
ƒ  (Dynamic)            server-rendered on demand

import { defineConfig } from "@playwright/test";

const port = Number(process.env.PORT ?? 3000);

export default defineConfig({
  testDir: "e2e",
  use: {
    baseURL: `http://127.0.0.1:${port}`,
    channel: "chrome", // the installed Google Chrome; or run `npx playwright install` for bundled browsers
  },
  webServer: {
    // Test the production build, not next dev
    command: `npm run build && npm run start -- -H 127.0.0.1 -p ${port}`,
    url: `http://127.0.0.1:${port}`,
    reuseExistingServer: !process.env.CI,
    timeout: 120_000,
  },
});

import { expect, test } from "@playwright/test";

test("the async products page renders on the server", async ({ page }) => {
  await page.goto("/products");
  await expect(page.getByRole("listitem")).toHaveText(["Mug: $12.00", "T-shirt: $25.00"]);
});

test("the picker navigates to the cart on the client", async ({ page }) => {
  await page.goto("/");
  await page.getByRole("button", { name: "+" }).click();
  await page.getByRole("button", { name: "Go to cart" }).click();
  await expect(page).toHaveURL("/cart?qty=2");
  await expect(page.getByText("Items in cart: 2")).toBeVisible();
});

test("the account page reads the cookie on the server", async ({ page, context, baseURL }) => {
  await context.addCookies([{ name: "user", value: "rohit", url: baseURL! }]);
  await page.goto("/account");
  await expect(page.getByText("Hello, rohit")).toBeVisible();
});

Running 3 tests using 1 worker

  ✓  1 e2e/shop.spec.ts:3:5 › the async products page renders on the server (290ms)
  ✓  2 e2e/shop.spec.ts:8:5 › the picker navigates to the cart on the client (283ms)
  ✓  3 e2e/shop.spec.ts:16:5 › the account page reads the cookie on the server (191ms)

  3 passed (7.5s)

import nextJest from "next/jest.js";

// Loads next.config and .env files, and compiles TS/JSX with the Next.js compiler (SWC)
const createJestConfig = nextJest({ dir: "./" });

export default createJestConfig({
  testEnvironment: "jsdom",
  testMatch: ["<rootDir>/jest/**/*.test.tsx"],
  moduleNameMapper: { "^@/(.*)$": "<rootDir>/src/$1" },
});

import { fireEvent, render, screen } from "@testing-library/react";
import { QuantityPicker } from "@/components/quantity-picker";

const mockPush = jest.fn(); // babel-jest only lets a hoisted jest.mock factory use variables named mock…
jest.mock("next/navigation", () => ({ useRouter: () => ({ push: mockPush }) }));

test("navigates to the cart with the quantity", () => {
  render(<QuantityPicker />);
  fireEvent.click(screen.getByRole("button", { name: "+" }));
  fireEvent.click(screen.getByRole("button", { name: "Go to cart" }));
  expect(mockPush).toHaveBeenCalledWith("/cart?qty=2");
});

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.324 s, estimated 1 s
Ran all test suites.

export default function Home() {
  return <h1>Home: no data, fully static</h1>;
}

import { Suspense } from "react";
import { cookies } from "next/headers";

async function Greeting() {
  const user = (await cookies()).get("user")?.value ?? "guest";
  return <p>Hello, {user}</p>;
}

export default function Account() {
  return (
    <main>
      <h1>Account</h1>
      <Suspense fallback={<p>…</p>}>
        <Greeting />
      </Suspense>
    </main>
  );
}

Route (app)      Revalidate  Expire
┌ ○ /
├ ○ /_not-found
├ ◐ /account
└ ○ /hourly              1h      1d


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

HTTP/1.1 307 Temporary Redirect
location: /hourly?_rsc
HTTP/1.1 200 OK
Vary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetch, Accept-Encoding
Cache-Control: s-maxage=3600, stale-while-revalidate=82800
Content-Type: text/x-component

import "./globals.css";

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

import Image from "next/image";
import Link from "next/link";

export default function Home() {
  return (
    <main>
      <Image src="/globe.svg" alt="" width={32} height={32} />
      <h1>Shop</h1>
      <Link href="/status">Server status</Link>
    </main>
  );
}

import { Suspense } from "react";
import { connection } from "next/server";
import { hostname } from "node:os";

async function ServerInfo() {
  await connection(); // render this part per request, not at build time
  return (
    <p>
      Rendered by {hostname()} at {new Date().toISOString()}
    </p>
  );
}

export default function StatusPage() {
  return (
    <main>
      <h1>Status</h1>
      <Suspense fallback={<p>Checking…</p>}>
        <ServerInfo />
      </Suspense>
    </main>
  );
}

import { connection } from "next/server";

export async function GET() {
  await connection();
  return Response.json({ ok: true, node: process.version, uptime: Math.round(process.uptime()) });
}

Route (app)
┌ ○ /
├ ○ /_not-found
├ ƒ /api/health
└ ◐ /status


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
ƒ  (Dynamic)            server-rendered on demand

cd .next/standalone && PORT=4512 HOSTNAME=127.0.0.1 node server.js

▲ Next.js 16.4.3
- Local:         http://127.0.0.1:4512
- Network:       http://127.0.0.1:4512
200  /
404  /_next/static/chunks/1k4ge9w1zsfwm.css
404  /globe.svg
200  /api/health
--- after copying
200  /_next/static/chunks/1k4ge9w1zsfwm.css  Cache-Control: public, max-age=31536000, immutable
200  /globe.svg  Cache-Control: public, max-age=0

FROM node:24-bookworm-slim AS base

# 1. Install dependencies from the lockfile only (cached until package*.json change)
FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci

# 2. Build the app; .next/cache survives between builds in a BuildKit cache mount
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ENV NEXT_TELEMETRY_DISABLED=1
RUN --mount=type=cache,target=/app/.next/cache npm run build

# 3. Runtime image: only the standalone server, static assets and public/
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
ENV NEXT_TELEMETRY_DISABLED=1
RUN groupadd --system --gid 1001 nodejs && useradd --system --uid 1001 --gid nodejs nextjs
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
ENV PORT=3000
ENV HOSTNAME=0.0.0.0
CMD ["node", "server.js"]

node_modules
.next
.git
Dockerfile
.dockerignore
npm-debug.log
.env*

#9 [deps 3/3] RUN npm ci
#9 7.155 added 345 packages, and audited 346 packages in 7s
#9 DONE 7.8s
#12 [builder 4/4] RUN --mount=type=cache,target=/app/.next/cache npm run build
#12 1.487 ✓ Compiled successfully in 1090ms
#12 DONE 2.9s
#14 [runner 4/5] COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
#14 DONE 0.1s

IMAGE              ID             DISK USAGE   CONTENT SIZE   EXTRA
nj12-shop:latest   d206471d79ff        400MB         93.3MB
IMAGE                   ID             DISK USAGE   CONTENT SIZE   EXTRA
node:24-bookworm-slim   a5f4366e8346        350MB         83.5MB

▲ Next.js 16.4.3
- Local:         http://localhost:3000
- Network:       http://0.0.0.0:3000
✓ Ready in 0ms
{"ok":true,"node":"v24.22.0","uptime":2}
Rendered by 74974a5519e2 at 2026-10-25T18:04:03.497Z

module.exports = {
  outputFileTracingIncludes: {
    "/*": ["src/i18n/locales/**/*.json"],
    "/api/pdf": ["./node_modules/some-native-lib/bin/**/*"],
  },
  outputFileTracingExcludes: {
    "/api/*": ["src/temp/**/*"],
  },
};

import { revalidateTag } from "next/cache";

export async function POST() {
  revalidateTag("prices", { expire: 0 }); // next read is a miss, no stale serving
  return Response.json({ revalidated: "prices", by: process.pid });
}

Route (app)
┌ ◐ /
├ ○ /_not-found
└ ƒ /api/revalidate


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
ƒ  (Dynamic)            server-rendered on demand

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
  cacheHandlers: {
    // 'use cache' entries go to a store every instance shares (src/ because this project uses a src folder)
    default: require.resolve("./src/cache-handlers/shared-folder.js"),
  },
};

export default nextConfig;

// A 'use cache' handler whose store is a folder all instances share: a stand-in for Redis.
const fs = require("node:fs/promises");
const path = require("node:path");
const { createHash } = require("node:crypto");

const dir = process.env.SHARED_CACHE_DIR || "/tmp/next-shared-cache";
const tagsFile = path.join(dir, "tags.json");
let tagTimes = {}; // tag -> { stale, expired } in ms, synced from tags.json by refreshTags()

const fileFor = (key) => path.join(dir, createHash("sha256").update(key).digest("hex") + ".json");

async function writeAtomic(file, text) {
  await fs.mkdir(dir, { recursive: true });
  const tmp = `${file}.${process.pid}.tmp`;
  await fs.writeFile(tmp, text);
  await fs.rename(tmp, file); // readers never see half a file
}

async function readTags() {
  try {
    tagTimes = JSON.parse(await fs.readFile(tagsFile, "utf8"));
  } catch {
    // no tags.json yet, or the store is down: keep the tag times we already have
  }
}

module.exports = {
  async get(cacheKey) {
    let stored;
    try {
      stored = JSON.parse(await fs.readFile(fileFor(cacheKey), "utf8"));
    } catch {
      return undefined; // a miss; never throw from get()
    }
    let revalidate = stored.revalidate;
    for (const tag of stored.tags) {
      const { stale = 0, expired = 0 } = tagTimes[tag] ?? {};
      if (expired > stored.timestamp && expired <= Date.now()) return undefined;
      if (stale > stored.timestamp) revalidate = -1; // serve, refresh in the background
    }
    const bytes = new Uint8Array(Buffer.from(stored.value, "base64"));
    const value = new ReadableStream({
      start(controller) {
        controller.enqueue(bytes);
        controller.close();
      },
    });
    return { ...stored, revalidate, value }; // a fresh stream for every hit
  },

  async set(cacheKey, pendingEntry) {
    const entry = await pendingEntry;
    const bytes = Buffer.from(await new Response(entry.value).arrayBuffer()); // read the stream once
    await writeAtomic(fileFor(cacheKey), JSON.stringify({ ...entry, value: bytes.toString("base64") }));
  },

  refreshTags: readTags, // once per request, before the first read: learn other instances' invalidations

  async getExpiration(tags) {
    return Math.max(...tags.map((tag) => tagTimes[tag]?.expired ?? 0), 0);
  },

  async updateTags(tags, durations) {
    await readTags();
    const now = Date.now();
    for (const tag of tags) {
      const times = tagTimes[tag] ?? {};
      if (durations) {
        times.stale = now;
        if (durations.expire !== undefined) times.expired = now + durations.expire * 1000;
      } else {
        times.expired = now;
      }
      tagTimes[tag] = times;
    }
    await writeAtomic(tagsFile, JSON.stringify(tagTimes));
  },
};

import { Suspense } from "react";
import { connection } from "next/server";
import { cacheLife, cacheTag } from "next/cache";

async function getPrices() {
  "use cache";
  cacheTag("prices");
  cacheLife("hours");
  // Stands in for a slow database query
  return { computedAt: new Date().toISOString(), by: process.pid };
}

async function Prices() {
  await connection(); // run on every request, so the cache lookup happens at runtime
  const prices = await getPrices();
  return (
    <p>
      computed at {prices.computedAt} by pid {prices.by}, served by pid {process.pid}
    </p>
  );
}

export default function Home() {
  return (
    <main>
      <h1>Prices</h1>
      <Suspense fallback={<p>Loading…</p>}>
        <Prices />
      </Suspense>
    </main>
  );
}

import { revalidateTag } from "next/cache";

export async function POST() {
  revalidateTag("prices", { expire: 0 }); // next read is a miss, no stale serving
  return Response.json({ revalidated: "prices", by: process.pid });
}

Route (app)
┌ ◐ /
├ ○ /_not-found
└ ƒ /api/revalidate


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
ƒ  (Dynamic)            server-rendered on demand

module.exports = {
  cacheHandler: require.resolve("./cache-handler.js"), // class with get, set, revalidateTag, resetRequestCache
  cacheMaxMemorySize: 0, // don't keep a second, per-instance copy in memory
};

"use client";

export function Banner() {
  // NEXT_PUBLIC_ values are replaced with string literals in the browser bundle at build time
  return <p>Banner (client): {process.env.NEXT_PUBLIC_BANNER}</p>;
}

import { Suspense } from "react";
import { connection } from "next/server";

async function ApiUrl() {
  await connection(); // render at request time, so process.env is read now
  return <p>API_URL (request time): {process.env.API_URL}</p>;
}

export default function RuntimePage() {
  return (
    <Suspense fallback={<p>…</p>}>
      <ApiUrl />
    </Suspense>
  );
}

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
  deploymentId: process.env.DEPLOYMENT_ID, // read when next build runs
  poweredByHeader: false,
};

export default nextConfig;

Route (app)
┌ ○ /
├ ○ /_not-found
└ ◐ /runtime


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

$ rm -rf .next && time next build
✓ Compiled successfully in 1043ms
real 2.41
$ du -sh .next/cache/turbopack
 23M	.next/cache/turbopack
$ time next build
✓ Compiled successfully in 84ms
real 1.49

- uses: actions/cache@v4
  with:
    path: |
      ~/.npm
      ${{ github.workspace }}/.next/cache
    key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
    restore-keys: |
      ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
  assetPrefix: "/blog-static", // this zone's JS and CSS live under /blog-static/_next/…
};

export default nextConfig;

import Link from "next/link";

export default function Blog() {
  return (
    <main>
      <h1>Blog zone</h1>
      <Link href="/blog/hello">Hello post</Link> {/* same zone: soft navigation */}
      <a href="/">Shop home</a> {/* other zone: plain <a>, full page load */}
    </main>
  );
}

export function generateStaticParams() {
  return [{ slug: "hello" }];
}

export default async function Post({ params }: PageProps<"/blog/[slug]">) {
  const { slug } = await params;
  return <h1>Post: {slug}</h1>;
}

Route (app)
┌ ○ /_not-found
├ ○ /blog
└   /blog/[slug]
  ├ ◐ /blog/[slug]
  └ ○ /blog/hello


○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

export default function Home() {
  return (
    <main>
      <h1>Shop zone</h1>
      <a href="/blog">Read the blog</a> {/* another zone: not <Link> */}
    </main>
  );
}

Route (app)
┌ ○ /
└ ○ /_not-found


○  (Static)  prerendered as static content

"/blog | Blog zone | marker=still here"
"/blog/hello | Post: hello | marker=still here"
"/ | Shop zone | marker=undefined"

 D src/middleware.ts
?? src/proxy.ts

--- a/src/app/inbox/page.tsx
+++ b/src/app/inbox/page.tsx
 import { cookies } from "next/headers";
 
-export default function Inbox({ searchParams }: { searchParams: { folder?: string } }) {
-  const theme = cookies().get("theme")?.value;
+export default async function Inbox(props: { searchParams: Promise<{ folder?: string }> }) {
+  const searchParams = await props.searchParams;
+  const theme = (await cookies()).get("theme")?.value;
   return <h1 className={theme}>Inbox: {searchParams.folder}</h1>;
 }

import type { NextConfig } from "next";

const nextConfig: NextConfig = {};

export default nextConfig;

import { NextResponse, type NextRequest } from "next/server";

export function proxy(request: NextRequest) {
  if (!request.cookies.has("session")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
}

export const config = { matcher: ["/inbox/:path*"] };

import { cookies } from "next/headers";

export default async function Inbox(props: { searchParams: Promise<{ folder?: string }> }) {
  const searchParams = await props.searchParams;
  const theme = (await cookies()).get("theme")?.value;
  return <h1 className={theme}>Inbox: {searchParams.folder}</h1>;
}

Route (app)
┌ ○ /_not-found
└ ƒ /inbox


ƒ Proxy (Middleware)

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

Error: Route "/inbox": Next.js encountered uncached or runtime data during prerendering.

`fetch(...)`, `cookies()`, `headers()`, `params`, `searchParams`, or `connection()` accessed outside of `<Suspense>` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.

Ways to fix this:
  - [stream] Provide a placeholder with `<Suspense fallback={...}>` around the data access
  - [cache] For uncached data (`fetch`, database calls): cache the access with `"use cache"` (does not apply to `connection()`)
  - [block] Set `export const instant = false` to allow a blocking route