如何使用next.js和next-i18next本地化路由? [英] How do I localize routes with next.js and next-i18next?

问题描述

更改语言时，我需要更改路线名称.例如，我有一条路线/en/career，但是当我更改为捷克语时，我需要一条路线/cs/kariera.基本上，我需要将URL本地化.现在，当我使用/en/career并将语言更改为cs时，我得到了/cs/career.该页面根本不应该存在，并且当我在服务器上呈现该页面时，我正确地得到了404.我可以使用next-i18next软件包执行类似的操作吗?如果可以，怎么办?

I need to change the name of the route when I change the language. For example, I have a route /en/career but when I change to Czech language, I need a route /cs/kariera. Basically I need the URLs to be localized. Right now, when I'm on /en/career and change language to cs, I get /cs/career. This page should not exist at all and when I render the page on server, I correctly get 404. Can I do something like this with next-i18next package? If so, how?

我找到了此软件包 https://github.com/vonschau/next-routes -with-locale 可能完全满足了我的需要，但显然不再维护，在next.js 8下也无法正常工作.

I found this package https://github.com/vonschau/next-routes-with-locale which probably does exactly what I need but it's apparently no longer maintained and doesn't work under next.js 8.

推荐答案

我最终要做的是使用next-routes包并为每个页面定义特定的路由，例如:

What I did eventually was to use next-routes package and defined specific route for every page, such as:

module.exports = routes()
    .add('en-career-listing', '/en/career/:listing', 'career/listing')
    .add('cs-career-listing', '/cs/kariera/:listing', 'career/listing')
    .add('en-career', '/en/career', 'career')
    .add('cs-career', '/cs/kariera', 'career')
    .add('en-our-story', '/en/our-story', 'our-story')
    .add('cs-our-story', '/cs/nas-pribeh', 'our-story')

我还必须基于next/link创建一个自定义的Link组件，在该组件中我将该语言手动添加到URL.

And I also had to create a custom Link component based on next/link where I manually added the language to URL.

这篇关于如何使用next.js和next-i18next本地化路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！