how to generate a dynamic route as static

[Nader-CS]

Summary

i have a a route that catch all segment like [slug] but I don't depend on it on render , can I statically generate it ?

Additional information

No response

Example

No response

[icyJoseph]

Mmm there's a couple of ways, but you have to be careful with them.

Both use rewrites. The idea is to rewrite /posts/[...slug]/page.tsx, so for example, /posts/foo/bar to /posts/page.tsx.

One pitfall here is, what if you want to access the slug data, at some point in time... Then it gets trickier, but not impossible.

If you use rewrites from next.config.js, then you'll not be able to collect the catch all slug, as query params, ever. There's a bug/lack-of-feature about this, which was a work around by using searchParams injected into the Page, but since we are pre-rendering this page, and don't want to it to become dynamic, we can't do this work around.

• useSearchParams context is missing search params from rewritten url #58256
• https://stackblitz.com/edit/nextjs-ay1fg1ki?file=app%2Fposts%2Fpage.tsx,app%2Fpage.tsx

Another thing you could do is, rewrite with middleware.ts, check if the pathname starts with a given prefix, /posts/ for example, and then rewrite to /posts, removing the rest of the path, and adding as one query param, which you could read in the browser, through useEffect or what not, if you need that. I have done something like this before, but haven't tested in a while.

[G-Bryan237]

You can statically generate a dynamic route (like [slug]) even if you don’t use the slug for rendering.
If You Want a Single Static Page (Ignore slug) :
Use dynamic = 'force-static' to treat the route as fully static (ignores params.slug) :

``` / app/[slug]/page.tsx
export const dynamic = 'force-static'; // Forces static generation (Next.js 13+)

export default function Page() {
  return <div>This page is static. The slug is ignored.</div>;
}

If You Need Predefined Slugs (SSG)
Use generateStaticParams() to explicitly list static paths then :**

 // app/[slug]/page.tsx
export async function generateStaticParams() {
  return [{ slug: 'home' }, { slug: 'about' }]; // Pre-renders these at build time
}

export default function Page({ params }) {
  return <div>Static page (slug: {params.slug})</div>;
}

[Nader-CS]

in my case have [locale] then inside it [...slug] to catch other route , and to statically generate route I do this

export async function generateStaticParams() {
  return appLocales.map(locale => ({
    locale,
    rest: [],
  }));
}

and it solves my problem