How do I handle a dynamic part in the path, for internationalization, when there are other paths?
Unanswered
Lionhead posted this in #help-forum
LionheadOP
I'm quite new to NextJS and I've been struggling with this one for days. I'm trying to have my site be internationalized so I have a dynamic part in the path, like:
What's the right approach here?
app\[language]\page.tsx. The problem I'm facing, in short, is that if someone access example.com/blah.png, language becomes blah.png and it tries to render page.tsx, which eventually raises an exception. I have logic to only accept supported languages (and inspect cookie, accept languages, and the path) in middleware.ts, but it came configured explicitly ignoring static files, apparently anythnig with a dot.What's the right approach here?
10 Replies
@Lionhead I'm quite new to NextJS and I've been struggling with this one for days. I'm trying to have my site be internationalized so I have a dynamic part in the path, like: `app\[language]\page.tsx`. The problem I'm facing, in short, is that if someone access example.com/blah.png, `language` becomes `blah.png` and it tries to render `page.tsx`, which eventually raises an exception. I have logic to only accept supported languages (and inspect cookie, accept languages, and the path) in `middleware.ts`, but it came configured explicitly ignoring static files, apparently anythnig with a dot.
What's the right approach here?
the right approach would be to redirect in any case to a path with a language segment. Of course for static files like images, videos, svgs, ... or api endpoints or nextjs stuff, you can exclude that. Like that you'll always have a valid language code.
And any other path like:
So: your middleware should redirect so it always has a language segment
/blah.png stays like it is and resolves to /public/blah.png - not your page.tsxAnd any other path like:
/hello/world will be redirected to /en/hello/world or another language codeSo: your middleware should redirect so it always has a language segment
LionheadOP
It does that, but it doesn't redirect "foo.bar" because of the expectation that it's a static file, but it still ends up being rendered because there's no static file.
LionheadOP
That would be a 404.
And how is the current behavior for "foo.bar"?
LionheadOP
It throws a 500 when it sends a request to the API server with "foo.bar" as [language], which ends up in Sentry.
Alright. Add the [generateStaticParams](https://nextjs.org/docs/app/api-reference/functions/generate-static-params) function to your code. Like that all language segments will be build with only the ones, that you've specified. Then add:
export const dynamicParams = falseWhen this config option is used, only paths provided by generateStaticParams will be served, and unspecified routes will 404
LionheadOP
When I tried that I run into this bug: https://github.com/vercel/next.js/issues/44764
It works in dev, but not on production.
I have no solution for this by now, sorry. If you find a solution, ping me in this thread and I'll mark your solution as answer, so others will have a solution as well