DynamicRoute with getStaticPaths -> StaticRoute

[sitch]

For dynamic routes that export getStaticPaths it would be useful to have a config setting to enable automatic translation from DynamicRoute -> StaticRoute.

You definitely want this off by default in case it's an expensive operation

Example

Give the page/pathname:

 "/blog/[slug]"

which exports getStaticPaths:

const getStaticPaths = () => ({
  paths: ["1", "2", "3"]
})

Now, instead of just:

<DynamicRoute<"/blog/[slug]", { "slug": string }>

You get:

<DynamicRoute<"/blog/[slug]", { "slug": string }>
<StaticRoute<"/blog/1">
<StaticRoute<"/blog/2">
<StaticRoute<"/blog/3">

Note

One small detail is that if you have fallback: false

const getStaticPaths = () => ({
  paths: ["1", "2", "3"],
  fallback: false
})

The DynamicRoute should be omitted:

<StaticRoute<"/blog/1">
<StaticRoute<"/blog/2">
<StaticRoute<"/blog/3">

[tatethurston]

Thanks @sitch. If there is sufficient interest in this I’ll look into implementation options. I’m curious to see what the next team’s solution for static sites will look like with the app directory and server components.

[sitch]

Sounds good -- I just saw this https://nextjs.org/blog/next-13-2#statically-typed-links

[tatethurston]

Yep, that only works for app directory (not pages) but if that works for your project LMK how it goes.