NextJS i18next Nextjs Localize Routes - next.js

Question

I've fully implemented next-i18next for my NextJS website. Everything is working as it should be:
Automatically detects language using i18next middleware
Changes language with language select button
Translations with only loading in relevant namespaces etc etc
However, I would like to localise the route names so that they reflect the set language.
I understand how this can be done using next-routes and this exchange was particularly useful:
How do I localize routes with next.js and next-i18next?
In that example, routes are set up like:
routes.add('en-home', '/', 'index')
routes.add('de-home', '/de', 'index')
routes.add('en-test', '/test', 'test')
routes.add('de-test', '/de/prufung', 'test')
I tried to implement Route and Link from next-routes using the following pattern as an example:
Get current language from i18n.language
Set link url according to language set
<Link route={`${lang}-home`}></Link>
And again, using a similar pattern for next-routes Router such as:
Router.pushRoute(`${lang}-home`)
However, this is not working.
I noticed in the referenced thread that #samuelg0rd0n commented that he created a custom Link component.
Please can anybody guide me how to change all the routes according to which language the website is set to?
Thanks!

Answer 1

I strongly recommend you trying an official Next.js example:
Next.js -- Named routes example (next-routes)
https://github.com/zeit/next.js/tree/canary/examples/with-next-routes
But I'm seen that it needs an additional server and also will fail if we custom our app structure as my own project example:
| src/app
| -- pages
| -- post.js
| -- category.js
| -- server.js (for routes)
| src/functions
| -- index.js (lambda function for server-side)
And if I run next src/app it will fail with the following error:
Error: > Couldn't find a `pages` directory. Please create one under the project root
at findPagesDir (/home/paneladm/projects/paneladm-dev/travel-website/node_modules/next/dist/lib/find-pages-dir.js:3:170)
at new DevServer (/home/paneladm/projects/paneladm-dev/travel-website/node_modules/next/dist/server/next-dev-server.js:1:3491)
at createServer (/home/paneladm/projects/paneladm-dev/travel-website/node_modules/next/dist/server/next.js:2:105)
at Object.<anonymous> (/home/paneladm/projects/paneladm-dev/travel-website/src/app/server.js:14:13)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Function.Module.runMain (module.js:694:10)
Next.js team is working in a simple solution now
This adds an example showing how to remove the need for a custom server for an existing application using next-routes by leveraging the new custom routes support built-in to Next.js
You should update next to 9.1.+ and implement your own routes as following:
const nextRoutes = require('next-routes');
const routes = (module.exports = nextRoutes());
routes.add('category', '/category/:slug');
routes.add('post', '/post/:lang/:slug');
In your next.config.js file, enable experimental property and implement rewrites method as below:
const { routes } = require('./routes');
...
experimental: {
rewrites() {
const rewrites = [];
for (const route of routes) {
if (route.pattern !== route.page) {
rewrites.push({
source: route.pattern,
destination: route.page,
});
}
}
return rewrites;
}
},
Now your structure should be:
| src/app
| -- pages
| -- post.js
| -- category.js
But if you want to custom your pages, try change the routes like this:
...
routes.add('category/[slug]', '/category/:slug');
routes.add('post/[slug]', '/post/:lang/:slug');
It will point to pages --> category --> [slug].js file instead.
See more details in the new PR implementation files.
References
Next.js PR 9519 - Add next-routes/custom-routes example