如何使用 nextJs 和 next-i18next 像 URL 别名一样本地化路由？答案

【问题标题】：How can I localize routes with the nextJs and next-i18next like an URL alias?如何使用 nextJs 和 next-i18next 像 URL 别名一样本地化路由？
【发布时间】：2021-06-16 14:34:28
【问题描述】：

我正在使用 NextJs 10.0.5 和 next-i18next 8.1.0 来本地化我的应用程序。众所周知nextJs10 有子路径路由，用于国际化路由。另外，我需要按语言更改页面名称。例如，我在 pages 文件夹中有一个 contact-us 文件。当我将语言更改为土耳其语时，我必须使用localhost:3000/tr/contact-us。但是，当语言为土耳其语时，我想使用localhost:3000/bize-ulasin 访问contact-us 页面。所以有两个网址，只有一个页面文件。

当我在 server.js 文件中使用带有 express js 的自定义路由时，它可以工作。但是，当我想访问getStaticProps 文件中getStaticProps 函数中的“语言环境”变量时，我无法访问它。当我使用localhost:3000/bize-ulasin URL 时，getStaticProps 函数返回未定义的“语言环境”变量。

server.js

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");
const app = next({ dev: process.env.NODE_ENV !== "production" });
const handle = app.getRequestHandler(app);

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname, query } = parsedUrl;

    if (pathname === "/bize-ulasin") {
      app.render(req, res, "/contact-us", query);
    }else{
      handle(req, res, parsedUrl);
    }
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log("> Ready on http://localhost:3000");
  });
});

/pages/contact-us-file

import { Fragment } from "react";
import Head from "next/head";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

const ContactUs = () => {
  const { t } = useTranslation("common");
  return (
    <Fragment>
      <Head>
        <title>Contact-Us</title>
      </Head>
    </Fragment>
  );
};

export const getStaticProps = async ({ locale }) => {
  console.log(locale); // When I use the URL localhost: 3000/bize-ulasin, it returns undefined.
  return {
    props: {
      ...(await serverSideTranslations(locale, ["common"])),
    },
  };
};

export default ContactUs;

如何使用 getStaticProps 访问“locale”变量？或者，如何将以下 URL 用于同一个页面文件？

->localhost:3000/contact-us
->localhost:3000/bize-ulasin

【问题讨论】：

标签： javascript express next.js i18next next-i18next

【解决方案1】：

我今天也遇到了同样的问题。这就是我解决问题的方法。

首先，删除 server.js 文件。在 Next.JS 10 中，使用 server.js 将与 i18n 路由产生冲突，您将无法获取 getStaticProps 中的 locale 数据。

NextJS 有一个漂亮的方法，名为rewrites。我们将使用它而不是我们的 server.js 文件。例如，如果您有一个名为contact-us-file 的页面，我们可以将我们的 next.config.js 文件重写为

const { i18n } = require('./next-i18next.config')

module.exports = {
    i18n,
    async rewrites() {
        return [
            {
                source: '/contact-us',
                destination: '/en/contact-us-file',
            },
          {
                source: '/bize-ulasin',
                destination: '/tr/contact-us-file',
            },
        ]
    },
}

由于您已经在使用 Next-i18next，希望您熟悉我正在导入的文件。

现在，如果您尝试导航 localhost:3000/contact-us 和 localhost:3000/bize-ulasin，您应该能够访问您的联系我们页面。

【讨论】：

反应路由器是否考虑这些重定向？
NextJS 实际上是在处理里面的路由。这里不涉及 React-router。
如何用这个实现语言切换？（语言切换后用户停留在同一页面上，只是区域设置更改）我有但这不会带我去 /bize-ulasin
@KhondokerZahidulHossain 反应路由器涉及前端或下一个路由器，我的意思是客户端路由器甚至不知道重定向并使用仍然旧值