Dynamic route with sub-paths (eg. /[locale]/dashboard)

[davecardwell]

Hi there,

I’m trying to build a multi-region website with next.js, however dynamic routing is not working the way I was expecting. Here is an example setup:

pages/[locale]/index.js
pages/[locale]/edit.js
pages/[locale]/team/index.js
pages/[locale]/team/[person].js
pages/[locale]/team/[person]/edit.js

getStaticPaths in pages/[locale]/index.js returns ['en-US', 'en-GB']
getStaticPaths in pages/[locale]/team/[person]/edit.js returns ['tom', 'dick', 'harry'].

In this scenario I would expect the following URLs to work and to be eligible for rendering at build time:

/en-US
/en-US/edit
/en-US/team
/en-US/team/tom
/en-US/team/tom/edit

I would expect the following to 404:

/en-CA
/en-US/other
/en-US/team/bob
/en-US/team/bob/edit
/en-US/team/tom/other

With appropriate getStaticProps in /pages/[locale]/index.js and /pages/[locale]/team/[person].js I would expect the pages for requests under /en-US/... to receive {locale: 'en-US'} params, and requests under /en-US/team/bob/... to receive {locale: 'en-US', person: 'bob'}.

Currently my /en-US page works as expected but /en-US/edit does not receive the locale query, and the router has an asPath of /[locale]/edit.

Have I made a mistake in my implementation somewhere? If so I will try to provide a minimal example to reproduce.

If it’s not the way dynamic routing currently works, is it feasible to support this case or is there something fundamental about the way it is implemented that would make it too difficult to change now?

Is there some other way I can achieve my goal, preferably without having to implement a custom server or losing the advantages of hybrid server-rendered/statically-generated next.js.

[timneutkens]

You have to add getStaticProps/getStaticPaths to all routes that have dynamic parameters, otherwise they become auto-exported and won't have the locale parameter until after hydration.

The way that you're outlining that you'd expect it to work would mean that we'd have to block routes from rendering, significantly slowing down build times.
On top of that it would not work as expected with fallback: true behavior and incremental static generation.

[davecardwell]

Thank you for the clarification, @timneutkens.

For my intended scenario is that currently my best option with next.js—to add getStaticProps/Paths to every page on my site? Or is there a cleaner way?

[Timer]

The intended behavior is indeed to require all variants be expressed at each page-level.

[davecardwell]

@timneutkens @Timer Thanks for taking the time out to explain. This is my first next.js project and I’m really enjoying it so far!

It looks like I can kind of achieve what I’m after with the experimental.rewrites feature:

const locales = ["en-US", "en-GB"];
const rewrites = async () => [
  {
    source: `/:x-locale(${locales.join("|")})`,
    destination: "/_locale",
  },
  {
    source: `/:x-locale(${locales.join("|")})/:path*`,
    destination: "/_locale/:path*",
  },
];

Unfortunately the value has to be retrieved in a custom _app.js’s getInitialProps() at the expense of Automatic Static Optimization.

I for one would love to see the ability to opt in for pages below a dynamic routing directory to inherit the getStaticPaths/Props, either with a new slug like /[locale...]/foo/bar.js or an {inherit:true, fallback:false} or {cascade:true, fallback:false}, etc. return value from getStaticPaths.

The different permutations could presumably be calculated once and cached during the build and then the value available on the router.query for all pages below that directory, and we’d still have Automatic Static Optimization.

I can see how this would be a useful feature on the last few websites I’ve worked on. At any rate, thanks again for the clarification and I’ll continue testing the experimental.rewrites workaround for now.