NextJS - 不同语言的路由

Question

我尝试用 Next JS 创建多语言网站。

我正在使用 next-translate 包进行翻译。

对于我使用静态生成的帖子。

|-> pages
  |-> post
    |-> [slug].js
|-> i18n.json
|-> next.config.js

问题

当我使用默认语言 ('tr') 时，我成功导航 http://localhost:3000/post/title-tr

但是如果我将语言更改为 'en'，库将 'en' 添加到路径然后尝试导航 http://localhost:3000/en/post/title-en 和 returns 404 页。

我试过的解决方法

在next.config.js中我添加了重写方法。但是没用。

require('dotenv').config();
const nextTranslate = require('next-translate');

module.exports = nextTranslate({
    async rewrites() {
        return [
            {
                source: '/en/post/:path*',
                destination: '/post',
            },
        ]
    },

    env: {
        NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
    },
})

我应该在哪里解决这个问题？路由、配置文件或 Link 组件？

i18n.json

{
    "locales": ["tr", "en"],
    "defaultLocale": "tr",
    "pages": {
      "*": ["common","country","position"]
    }
}

Link 我使用的组件

<Link key={`L${item.id}`} href="/post/[slug]" as={`/post/${slug(item.title)}-${item.id}`}></Link>

[slug].js

function Post({ data }){
  return <>...</>
}

export async function getStaticPaths() {
   const { data } = await fetch('fromAPI');
   return {
        paths: data.map(item => {
            return {
                params:
                {
                    slug: `${slug(item.title)}-${item.id}`
                }
            }
        }),
        fallback: false
    }
}

export async function getStaticProps({ params }) {
    const { data } = await fetch('fromAPI');
    return { props: { data} }
}

export default Post;

Answer 1

您必须为每个语言环境添加一个路径，如文档中所示：https://nextjs.org/docs/advanced-features/i18n-routing#dynamic-routes-and-getstaticprops-pages

// [slug].js
export const getStaticPaths = ({ locales }) => {
  return {
    paths: [
      { params: { slug: 'post-1' }, locale: 'tr' },
      { params: { slug: 'post-1' }, locale: 'en' },
    ],
    fallback: true,
  }
}

When I use default language ('tr') I successfully navigate http://localhost:3000/post/title-tr But If I changed to language to 'en', library add 'en' to path then try to navigate http://localhost:3000/en/post/title-en and returns 404 page.

如果没有提供语言环境，将只生成默认语言环境。如果 fallback 为 false，则 getStaticPaths 未返回的任何路径都将导致 404 页面。所以现在您只生成 defaultLocale“tr”，所有其他具有不同区域设置的路径将导致 404 页面。

NextJS - 不同语言的路由

NextJS - Routing with different language

i18next

reactjs

next.js