Val

Page Router

What is the Page Router?

Val's page router allows you to create dynamic routes based on your content. By using `s.record().router(nextAppRouter)`, 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.record(docsSchema).router(nextAppRouter),
  {
    "/docs": {
      title: "Overview",
      sections: [/* ... */],
    },
    "/docs/installation": {
      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.keyOf`. Read more about it here.

// Import your page router module
import docsPages from "./app/(main)/docs/[[...slug]]/page.val";

// Use keyOf to create type-safe links
const navigationSchema = s.object({
  links: s.array(
    s.object({
      label: s.string(),
      href: s.keyOf(docsPages), // All page routes are available
    })
  ),
});

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

Recursive keyOf with Router

When using keyOf with a router, it becomes recursive. This means if you add new pages to your router, they automatically become available as valid references in your keyOf fields. Your IDE will provide autocomplete for all available routes, and TypeScript will ensure all links are valid.

Note

More detailed examples and patterns will be added to this section in the future.