Pages and routes

Nib discovers page files under src/pages at build time. The final folder containing the page file becomes the route:

Each route folder may contain page.tsx, page.md, or one configured page.<extension> source, but not multiple page types. Route names are static; Nib does not interpret [id] folders or add a client router.

TSX pages and metadata

Export a default component and optional meta:

import type { PageMeta } from '@briansunter/nib'

export const meta: PageMeta = {
  title: 'About',
  description: 'Learn about this site.',
}

export default function AboutPage() {
  return <h1>About</h1>
}

The site config supplies defaults. A page’s title and description override those defaults when present. draft: true prevents a page from entering the route map or generated output.

TSX pages, layouts, and ordinary components produce static HTML. Put state and event handlers in a React island so only that boundary loads browser JavaScript.

Navigation and links

Add top-level links in nib.config.ts:

navigation: [
  { label: 'Home', href: '/' },
  { label: 'Docs', href: '/docs/' },
]

For internal links in TSX, use siteHref:

import { siteHref } from '@briansunter/nib'

<a href={siteHref('/docs/')}>Read the docs</a>

siteHref includes the Vite base path, which matters on GitHub project sites served below /<repository>/. Markdown links are resolved by the browser, so prefer relative links between Markdown pages.

Not-found behavior

src/pages/404/page.tsx is prerendered as 404.html. Unknown development requests use the same component, while a static host serves the generated file according to that host's fallback rules.