reactjs 如何在Next.js中设置i18n翻译的URL路由?

hc8w905p  于 2023-05-28  发布在  React
关注(0)|答案(2)|浏览(171)

我正在使用Next.js i18n-routing来设置多语言网站。这工作完美。如果我在/pages/about.js中创建一个文件,这将根据我的区域设置创建URL,例如:

  • EN -> /about
  • DE -> /de/about
  • ES -> /es/about

这一切都很好。
如果我想有一个翻译的URL路由每种语言?我被困在如何设置这个…

  • EN -> /about
  • DE -> /de/uber-uns
  • ES -> /es/nosotros

knsnq2tg

knsnq2tg1#

您可以通过在next.config.js文件中利用rewrites来实现已转换的URL路由。

module.exports = {
    i18n: {
        locales: ['en', 'de', 'es'],
        defaultLocale: 'en'
    },
    async rewrites() {
        return [
            {
                source: '/de/uber-uns',
                destination: '/de/about',
                locale: false // Use `locale: false` so that the prefix matches the desired locale correctly
            },
            {
                source: '/es/nosotros',
                destination: '/es/about',
                locale: false
            }
        ]
    }
}

此外,如果您希望在客户端导航期间保持一致的路由行为,可以围绕next/link组件创建一个 Package 器,以确保显示转换后的URL。

import { useRouter } from 'next/router'
import Link from 'next/link'

const pathTranslations = {
    de: {
        '/about': '/uber-uns'
    },
    es: {
        '/about': '/sobrenos'
    }
}

const TranslatedLink = ({ href, children }) => {
    const { locale } = useRouter()
    // Get translated route for non-default locales
    const translatedPath = pathTranslations[locale]?.[href] 
    // Set `as` prop to change displayed URL in browser
    const as = translatedPath ? `/${locale}${translatedPath}` : undefined

    return (
        <Link href={href} as={as}> 
            {children}
        </Link>
    )
}

export default TranslatedLink

然后在代码中使用TranslatedLink而不是next/link

<TranslatedLink href='/about'>
    <a>Go to About page</a>
</TranslatedLink>

请注意,您可以重用pathTranslations对象来在next.config.js中动态生成rewrites数组,并为转换后的URL提供单一的真实值来源。

vlju58qv

vlju58qv2#

对于更可扩展的解决方案,请检查此软件包:https://www.npmjs.com/package/next-translate-routes
有了这个,你可以为你的主url和翻译保留一个json文件,并且还有一个组件可以使i18n链接更容易

相关问题