BuildDocsReferenceGuidesBlog
Discord logo
Discord
GitHub logo
TGetStaticPaths
Bun

type

__experimental.GetStaticPaths

type GetStaticPaths<Params extends SSGParamsLike = SSGParamsLike> = () => MaybePromise<{ paths: SSGPaths<Params> }>

getStaticPaths is Bun's implementation of SSG (Static Site Generation) path determination.

This function is called at your app's build time to determine which dynamic routes should be pre-rendered as static pages. It returns an array of path parameters that will be used to generate static pages for dynamic routes (e.g., [slug].tsx, [category]/[id].tsx).

The function can be either synchronous or asynchronous, allowing you to fetch data from APIs, databases, or file systems to determine which paths should be statically generated.

// In pages/blog/[slug].tsx ———————————————————╮
export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
  // Fetch all blog posts from your CMS or API at build time
  const posts = await fetchBlogPosts();

  return {
    paths: posts.map((post) => ({
      params: { slug: post.slug }
    }))
  };
};

// In pages/products/[category]/[id].tsx
export const getStaticPaths: GetStaticPaths<{
  category: string;
  id: string;
}> = async () => {
  // Fetch products from database
  const products = await db.products.findMany({
    select: { id: true, category: { slug: true } }
  });

  return {
    paths: products.map(product => ({
      params: {
        category: product.category.slug,
        id: product.id
      }
    }))
  };
};

// In pages/docs/[...path].tsx (catch-all route)
export const getStaticPaths: GetStaticPaths<{ path: string[] }> = async () => {
  // Read documentation structure from file system
  const docPaths = await getDocumentationPaths('./content/docs');

  return {
    paths: docPaths.map(docPath => ({
      params: { path: docPath.split('/') }
    }))
  };
};

// Synchronous example with static data
export const getStaticPaths: GetStaticPaths<{ id: string }> = () => {
  const staticIds = ['1', '2', '3', '4', '5'];

  return {
    paths: staticIds.map(id => ({
      params: { id }
    }))
  };
};