Val

Page routing

Page Router

What is the Page Router?

Val's page router allows you to create dynamic routes based on your content. By using s.router(nextAppRouter, schema), you can automatically generate pages for each entry in your content record.

Basic Setup

The documentation you're reading right now is built using Val's page router. Here's how it's structured:

// app/(main)/docs/[[...slug]]/page.val.ts
import { c, nextAppRouter, s } from "@/val.config";
import { docsSchema } from "./docsSchema.val";

export default c.define(
  "/app/(main)/docs/[[...slug]]/page.val.ts",
  s.router(nextAppRouter, docsSchema),
  {
    "/docs": {
      title: "Overview",
      sections: [/* ... */],
    },
    "/docs/init": {
      title: "Installation",
      sections: [/* ... */],
    },
    "/docs/getting-started": {
      title: "Getting started",
      sections: [/* ... */],
    },
    // ... more routes
  },
);

How It Works

The router maps keys in your record to URL paths. Each key becomes a route, and Next.js will generate the corresponding pages automatically.

Links

Typically you also want to define links to pages in your application. You can do this using s.route(). Read more about it here.

// Use s.route() to create type-safe links
const navigationSchema = s.object({
  links: s.array(
    s.object({
      label: s.string(),
      href: s.route(), // Validated against all router modules
    })
  ),
});

export default c.define("/content/navigation.val.ts", navigationSchema, {
  links: [
    { label: "Overview", href: "/docs" },
    { label: "Installation", href: "/docs/init" },
    { label: "Getting Started", href: "/docs/getting-started" },
    // Val validates these are valid routes!
  ],
});