Nextjs App Router

Nextjs 13 app router best practices.

Paid Content

Static paid content

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { decrypt } from "./your-auth-system";

export function middleware(req: NextRequest) {
  // E.g store the payment status directly in the session token
  // Or call an API like Stripe
  const sessionToken = req.cookies().get("session")?.value;
  const session = decrypt(session);
  if (!session?.isPaid) {
    return NextResponse.redirect("/subscribe", new URL(req.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: "/(.*)",
};

Caching

Work in progress to nail down the caching strategy.

tRPC

Simple Typesafe APIs

Source code

Props

Passing promises as props.

Context

• Server Components — The rendering model App Router builds on
• Hydration — Where server meets client
• State Management — Data flow patterns in App Router
• Services — Server-side logic and middleware
• Performance — Core Web Vitals impact of routing decisions

Questions

What does the App Router's file-based convention gain over explicit route configuration?

• When does caching help versus when does it create stale data bugs?
• How do you decide between tRPC and server actions for type-safe data fetching?
• Where is the boundary between "server component" and "needs an API route"?