Dinou logoDinou
docs
npmGitHub

Cheatsheet: Conventions & Configuration

Quick reference for file naming conventions and page configuration functions in Dinou.

File Conventions Cheatsheet

Dinou recognizes specific filenames to build the routing hierarchy and control layout behavior.

Route Components

FilenameEnvironmentDescription
page.{jsx,tsx,js,ts}Server or ClientThe unique UI for a route
layout.{jsx,tsx,js,ts}Server or ClientWraps the page and children segments
error.{jsx,tsx,js,ts}Server or ClientUI for 500 errors within the segment
not_found.{jsx,tsx,js,ts}Server or ClientUI for 404 not found pages within the segment
Hierarchical Resolution

Dinou searches up the directory tree for the closest matching file. A not_found.tsx in /blog/[slug]/not_found.tsxtakes precedence over one in the root for /blog/not_found.tsx.

Layout Control Flags (Empty Files)

Create these empty files (no extension) to alter how layouts apply to a specific route directory.

Flag FileApplies ToEffect
no_layoutpage.tsx, error.tsx, not_found.tsxComponent renders without any layout wrapping
reset_layoutlayout.jsxResets layout hierarchy. This layout becomes the new Root, ignoring all parent layouts.
no_layout_errorerror.jsxError page renders without any layout
no_layout_not_foundnot_found.jsxNot found page renders without any layout
Example: Marketing Site
src/marketing/layout.jsxsrc/marketing/reset_layoutsrc/marketing/page.jsx

Result: Marketing pages use only their own layout, ignoring the global root layout.

Empty File Creation
touch src/marketing/reset_layout

No content needed. The file's presence alone triggers the behavior.

Page Configuration (page_functions.ts) Cheatsheet

Export these functions from page_functions.{ts,js} to configure the associated page.tsx.

getStaticPaths()

Defines paths for Static Site Generation (SSG). Paths not returned will be generated on-demand (ISG).

export function getStaticPaths() {
  // Simple dynamic route
  return ["1", "2", "hello"];
  
  // Catch-all route
  return [["intro"], ["api", "v1", "auth"]];
  
  // Complex nested route
  return [
    { category: "electronics", specs: ["m3", "16gb"], brand: "apple" },
    { category: "clothing", specs: ["cotton", "white"], brand: undefined },
  ];
}
Automatic Route Propagation

Static parameters propagate downwards. If blog/[slug]/page_functions.ts returns["post-a", "post-b"], Dinou automatically generates both/blog/post-a and /blog/post-a/details (if exists).

getProps({ params })

Async function to fetch data on the server and pass props to Page and Root Layout.

export async function getProps({ params }) {
  const data = await db.getItem(params.id);
  return {
    page: { item: data },        // Props for page.tsx
    layout: { title: data.title }, // Props for Root Layout
  };
}

revalidate()

Sets the Incremental Static Regeneration (ISR) time in milliseconds.

export function revalidate() {
  return 60000; // Regenerate every 60 seconds
}
Value: 60000
Regeneration is triggered by the first request after 60s.
Value: 0
No revalidation (permanently static unless rebuilt)

dynamic()

Forces a page to be Server-Side Rendered on every request, bypassing static generation.

export function dynamic() {
  return true; // Always SSR
}