API REFERENCE

defineStaticPaths

defineStaticPaths() is a utility function used to declare which dynamic routes should be pre-rendered when using Rasengan.js in SSG (Static Site Generation) mode.

It allows you to generate a list of parameters (such as usernames, slugs, or IDs) that Rasengan.js will convert into individual static HTML files during the build.

Usage

app/_routes/users/[username].page.tsx

tsximport { defineStaticPaths } from "rasengan";
 
// Page definition...
 
Page.generatePaths = () => {
  return defineStaticPaths([
    { username: "nina" },
    { username: "dilane3" },
    { username: "michel" },
  ]);
};

This creates three static pages at build time:

bash/static/users/nina/index.html
/static/users/dilane3/index.html
/static/users/michel/index.html

When to Use

Use defineStaticPaths() when:

You have dynamic routes ([slug], [id], [username], etc.)
You know the list of values before build time
The pages do not need runtime generation

Not recommended for pages that:

Depend on real-time data
Change constantly or need personalization
Are behind authentication

Function Signature

tsdefineStaticPaths(
  paths: Array<Record<string, string | number>>
): { paths: Array<Record<string, string | number>> }

Parameter	Type	Description
`paths`	`Record<string, string \| number>[]`	A list of dynamic parameters to generate as static pages

Example with Component

pages/users/[username].tsx

tsximport { PageComponent, useParams, defineStaticPaths } from "rasengan";
 
const Page: PageComponent = () => {
  const { username } = useParams();
  return <h1>Hello {username}</h1>;
};
 
Page.generatePaths = async () => {
  return defineStaticPaths([
    { username: "nina" },
    { username: "dilane3" },
    { username: "michel" },
    { username: "bros" },
    { username: "adora" },
  ]);
};
 
export default Page;

Returned Output Format

defineStaticPaths() returns an object with a paths property:

ts{
  paths: [
    { username: "nina" },
    { username: "dilane3" },
    { username: "michel" },
  ]
}

Learn more about dynamic pre-rendering

Details

defineRoutesGroup

renderApp