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

我在用Next.js i18n 路由 https://nextjs.org/docs/advanced-features/i18n-routing设置多语言网站。这非常有效。如果我创建一个文件/pages/about.js这将根据我的区域设置创建 URL，例如：

• CN ->/about
• 德->/de/about
• 英语->/es/about

那就好了。

如果我想要每种语言的翻译 URL 路由怎么办？我被困在如何设置这个问题上......

• CN ->/about
• 德->/de/uber-uns
• 英语->/es/nosotros

?

您可以利用以下方式实现翻译后的 URL 路由rewrites https://nextjs.org/docs/api-reference/next.config.js/rewrites#rewrites-with-i18n-support在你的next.config.js file.

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组件以确保显示翻译后的 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动态生成对象rewrites数组中的next.config.js并且翻译后的 URL 具有单一的真实来源。