Routage

Les routes proviennent directement du système de fichiers, sous src/.

src/
  index.ht.js              → /
  about.ht.js              → /about
  blog/
    index.ht.js            → /blog
    [slug].ht.js           → /blog/:slug
  docs/
    [...path]?.ht.js       → /docs, /docs/a, /docs/a/b, ...
  (admin)/
    users.ht.js            → /users
  404.ht.js                → dist/404.html

Tableau des routes

Fonctionnalité	Fichier	URL
Statique	`index.ht.js`	`/`
Imbriquée	`blog/index.ht.js`	`/blog`
Dynamique	`blog/[slug].ht.js`	`/blog/my-post`
Plusieurs paramètres	`blog/[year]/[slug].ht.js`	`/blog/2026/my-post`
Fourre-tout	`docs/[...path].ht.js`	`/docs/api/auth`
Fourre-tout optionnel	`docs/[...path]?.ht.js`	`/docs + niveaux inférieurs`
Groupes de routes	`(admin)/users.ht.js`	`/users`

La route la plus spécifique l’emporte : le statique bat le dynamique, et le dynamique bat les fourre-tout. Deux fichiers produisant la même URL provoquent une erreur de build.

generateStaticParams

Les routes dynamiques déclarent quelles pages émettre au build. Avec sitelo (dev), les routes dynamiques se rendent toujours à la demande, sans lister chaque paramètre.

export function generateStaticParams() {
  return [
    { slug: 'hello-world' },
    { slug: 'my-first-post' },
  ]
}

export default ({ params }) => `
  <html><body><h1>${params.slug}</h1></body></html>
`

import { html, body, h1 } from 'javascript-to-html'

export function generateStaticParams() {
  return [
    { slug: 'hello-world' },
    { slug: 'my-first-post' },
  ]
}

export default ({ params }) =>
  html(
    body(h1(params.slug))
  )

export function generateStaticParams() {
  return [
    { slug: 'hello-world' },
    { slug: 'my-first-post' },
  ]
}

export default function Post({ params }) {
  return (
    <html>
      <body>
        <h1>{params.slug}</h1>
      </body>
    </html>
  )
}

Les valeurs peuvent être des chaînes, des nombres ou des booléens — ils sont convertis en chaîne et encodés pour l’URL. Les paramètres fourre-tout acceptent des tableaux ({ path: ['a', 'b'] }) ou des chaînes séparées par des barres obliques ({ path: 'a/b' }).

Une page dynamique qui ne génère aucune route affiche un avertissement, pour qu’elle ne disparaisse pas silencieusement de votre site.