Routing

Le rotte arrivano direttamente dal filesystem, sotto 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

Tabella delle rotte

Vincono le rotte più specifiche: la statica batte la dinamica, la dinamica batte i catch-all. Due file che generano lo stesso URL sono un errore di build.

generateStaticParams

Le rotte dinamiche dichiarano quali pagine produrre in fase di build. Con sitelo (sviluppo) le rotte dinamiche continuano a renderizzarsi su richiesta, senza elencare ogni parametro.

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>
  )
}

I valori possono essere stringhe, numeri o booleani — vengono convertiti in stringa e codificati per l’URL. I parametri catch-all accettano array ({ path: ['a', 'b'] }) oppure stringhe separate da barre ({ path: 'a/b' }).

Una pagina dinamica che genera zero rotte stampa un avviso, così non può sparire in silenzio dal tuo sito.