Routing Fundamentals

Defining Routes

Every folder inside app represents a route segment that maps to a URL segment. Nested folders create nested routes automatically, no configuration file required.

export default function Settings() {
  return <h1>Settings</h1>;
}

Dynamic Segments

Wrap a folder name in square brackets to create a dynamic segment that's populated at request time, such as a blog slug or product id.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  return <h1>Post: {slug}</h1>;
}

Route Patterns

PledgeJS supports the full range of route patterns from the App Router convention.

• [param] — dynamic segment
• [...param] — catch-all segment
• [[...param]] — optional catch-all segment
• (group) — route group (does not affect URL path)
• @slot — parallel route slot
• (..)folder — intercepting route

Route Groups

Wrapping a folder name in parentheses, like (marketing), opts it out of the URL path while still letting you organize routes and share layouts.

API Routes

Use route.ts to define server-only API endpoints with HTTP method handlers. CORS middleware and XSS sanitization are auto-applied.

export async function GET() {
  const posts = await getPosts();
  return Response.json(posts);
}

export async function POST(request: Request) {
  const body = await request.json();
  const post = await createPost(body);
  return Response.json(post, { status: 201 });
}

Middleware

middleware.ts runs before every request. Use it for redirects (open-redirect validated), rewrites, headers, and short-circuiting. Matcher config supports glob patterns, param patterns, and regex.