Dinou logoDinou
docs
npmGitHub

Page Functions (page_functions.ts)

For advanced control over rendering behavior, data fetching, and static generation, you can create a page_functions.ts (or .js) file next to your page.tsx.

1. getProps (Static/Layout Data Injection)

Use this function to fetch data based on the route parameters and inject it into your Page and Root Layout.

Function Signature
  • Arguments: { params } (The dynamic route parameters)
  • Returns: An object with page and layout keys containing the props
// src/blog/[slug]/page_functions.ts

export async function getProps({ params }) {
  // 1. Fetch data based on the URL path (e.g., /blog/my-post)
  const post = await db.getPost(params.slug);

  // 2. Return data.
  // 'page' props go to page.jsx
  // 'layout' props go to layout.jsx (Root Layout)
  return {
    page: { post },
    layout: { title: post.title },
  };
}

2. getStaticPaths (Static Generation)

Defines which dynamic paths should be pre-rendered at server start (SSG).

ISG (Incremental Static Generation)

Paths not returned here will be generated on-demand when requested for the first time.

Return Format

Dinou is flexible with the return format depending on the complexity of your route:

Route TypeBest FormatExample Return
Simple ([id])Array<string>["1", "2"]
Catch-all ([...slug])Array<Array<string>>[["a", "b"], ["c"]]
Nested / ComplexArray<Object>[{"id": "1", "category": "tech"}]

Simple Dynamic Routes

// src/blog/[id]/page_functions.ts
export function getStaticPaths() {
  return ["1", "2", "hello"];
  // Generates: /blog/1, /blog/2, /blog/hello
}

Catch-all Routes

// src/docs/[...slug]/page_functions.ts
export function getStaticPaths() {
  return [
    ["intro"], // /docs/intro
    ["api", "v1", "auth"], // /docs/api/v1/auth
  ];
}

Automatic Route Propagation (Recursion)

One of Dinou's most powerful features is that static parameters propagate downwards. If you define values for a segment, Dinou will automatically generate all static sub-pages nested within that segment.

Example Structure
- src/blog/[slug]/page.tsx (+ page_functions.ts)
- src/blog/[slug]/details/page.tsx (Nested static page)

If getStaticPaths in blog/[slug] returns ["post-a", "post-b"], Dinou generates 4 pages:

  1. /blog/post-a
  2. /blog/post-a/details
  3. /blog/post-b
  4. /blog/post-b/details

Nested Pages & The "Chain of Responsibility"

When nesting routes, dependency flows downwards. If an intermediate segment (whether static or dynamic) contains apage.tsx, it becomes a required step in the generation chain.

If a parent page fails to define its own paths (e.g., returns an empty array), the generator stops there. It will never reach the child pages, regardless of whether the children have valid getStaticPaths defined.

Scenario
- src/case3/[slug]/page.tsx (Parent Page)
- src/case3/[slug]/[id]/page.tsx (Child Page)

In this structure, [id] depends physically on [slug] existing first.

❌ Broken Chain

If src/case3/[slug]/page_functions.ts returns [] (no paths):

  1. Dinou tries to build /case3/[slug].
  2. No paths are returned. No folders are created.
  3. Result: The build process never attempts to generate [id].
✅ Functional Chain

The parent must resolve its own level for the children to run:

// src/case3/[slug]/page_functions.ts
export function getStaticPaths() {
  // 1. Defines the parent folders
  return ["foo", "bar"];
}

// src/case3/[slug]/[id]/page_functions.ts
export function getStaticPaths() {
  // 2. Now runs inside /case3/foo/ and /case3/bar/
  return ["100", "200"];
}

Nested & Complex Routes (Pass-through Segments)

When you have multiple dynamic segments in a path without intermediate pages, you must return an Object to map values to all parameter names involved.

// Structure: src/shop/[category]/[...specs]/[[brand]]/page_functions.ts
// (Assuming [category] and [...specs] do NOT have their own page.tsx)

export function getStaticPaths() {
  return [
    {
      category: "electronics",
      specs: ["m3", "16gb"],
      brand: "apple",
    },
    {
      category: "clothing",
      specs: ["cotton", "white"],
      brand: undefined, // Valid: optional and at the end of the route
    },
  ];
}

Normalization Guarantee

Dinou ensures that params are consistent between SSG and SSR:

Catch-all Segments
Will always be an Array (e.g., undefined becomes [], "val" becomes ["val"]).
Optional Single Segments
Remain undefined if omitted.

Async Support

getStaticPaths can be an async function. This allows you to fetch data from a database or API during the build process to determine which paths to render.

Database Integration

Perfect for generating product pages, blog posts, or categories based on your CMS content.

// src/products/[id]/page_functions.ts

export async function getStaticPaths() {
  // Only generate the top 10 products at build time
  const topProducts = await db.getTopProducts(10);
  
  return topProducts.map(p => p.id);
  
  // Any ID not in this list will be generated 
  // on-demand when a user visits /products/999
}

3. revalidate (ISR)

Enables Incremental Static Regeneration. Defines the cache lifetime of a static page in milliseconds.

Return Values
  • Returns: number (milliseconds)
  • If it returns 0 (or is not defined), the page remains static indefinitely (unless rebuilt)
// src/dashboard/page_functions.ts
export function revalidate() {
  return 60000; // Regenerate at most once every 60 seconds
}

4. dynamic (Force SSR)

Forces a page to be rendered dynamically (Server-Side Rendering) on every request, bypassing static generation.

Function Signature
  • Returns: boolean
// src/profile/page_functions.ts
export function dynamic() {
  return true; // Always render on demand (SSR)
}