Dinou docs

File Conventions Cheatsheet

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

Route Components

Filename	Environment	Description
page.{jsx,tsx,js,ts}	Server or Client	The unique UI for a route
layout.{jsx,tsx,js,ts}	Server or Client	Wraps the page and children segments
error.{jsx,tsx,js,ts}	Server or Client	UI for 500 errors within the segment
not_found.{jsx,tsx,js,ts}	Server or Client	UI 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 File	Applies To	Effect
no_layout	page.tsx, error.tsx, not_found.tsx	Component renders without any layout wrapping
reset_layout	layout.jsx	Resets layout hierarchy. This layout becomes the new Root, ignoring all parent layouts.
no_layout_error	error.jsx	Error page renders without any layout
no_layout_not_found	not_found.jsx	Not 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.

Layout Isolation Strategy

Use reset_layout to create completely isolated layout systems (e.g., marketing site vs. admin dashboard vs. documentation). Each can have its own navigation, styles, and state management.

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

Performance Tip: Blocking vs. Streaming

Because getProps blocks the initial render at request time, keep it fast for dynamic routes. Note that this does not affect pre-rendered static pages (SSG) since their data is fetched at server startup. In Incremental Static Generation (ISG), it only blocks the very first request by the first visitor before the page is cached. If you need slow dynamic fetches on dynamic routes, defer them to a Suspense boundary wrapping a Server Function.

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

Automatic Bailout

Dinou is static by default. Only use dynamic() when you need explicit SSR behavior. The framework automatically switches to dynamic when request-specific APIs are used.

`validateParams(params)`

Validates dynamic parameters on the server prior to rendering. Returning false immediately blocks the request and returns a 404 response.

export function validateParams(params) {
  // Reject route parameter and return 404 instantly
  return typeof params.id === "string" && /^\d+$/.test(params.id);
}

`allowISG()`

Enables or disables Incremental Static Generation (ISG) on-demand for dynamic routes not generated at server startup (via getStaticPaths).

export function allowISG() {
  // Disable dynamic on-demand generation; serve getStaticPaths ONLY
  return false;
}

`getCacheTags(params)`v5.1.0+

Defines the static cache tags for the generated page. Can be sync or async (supporting database or CMS queries), allowing on-demand invalidation via revalidateTag.

export async function getCacheTags(params) {
  // Can fetch data from a DB or CMS to determine tags
  const product = await db.getProduct(params.id);
  return ["products", product.category, `product-${params.id}`];
}

Cheatsheet: Conventions & Configuration

File Conventions Cheatsheet

Route Components

Layout Control Flags (Empty Files)

Layout Isolation Strategy

Page Configuration (page_functions.ts) Cheatsheet

getStaticPaths()

getProps(params)

Performance Tip: Blocking vs. Streaming

revalidate()

dynamic()