This tutorial uses PRISM file-based routing: every folder under src/app/ becomes a URL, with nested layouts and server-side loaders.
Read the routing docs →Components come from bext/ui — a faithful shadcn/ui port for bext and PRISM, styled through route_css tokens.
Explore bext/ui →A dynamic [id] segment captures part of the URL and hands it to the loader via params.
A product needs its own URL. Put the folder name in brackets — src/app/products/[id]/page.tsx — and it serves /products/42. The captured part arrives in the loader as params.id.
export async function loader({ params }) {
const product = CATALOGUE.find((p) => String(p.id) === params.id);
return { product };
}Click a row in the Products table in the preview: it opens the detail page, rendered from the URL's id — server-side, with no client fetch.
[...slug]) capture several path levels at once. Reference: file routing.