如何使用i18next在Gatsby.js中实现URL翻译？

你可以通过以下几种方式实现翻译后的页面路径，操作不算复杂：

方式1：直接在gatsby-plugin-react-i18next配置里映射路径 #

在gatsby-config.js的插件配置中，除了基础的多语言设置，直接为每个页面指定不同语言对应的路径：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-react-i18next`,
      options: {
        i18n: {
          languages: ["en", "es"],
          defaultLanguage: "en",
        },
        // 配置页面路径映射
        pages: [
          {
            matchPath: "/hello-world",
            languages: ["en", "es"],
            path: {
              en: "/hello-world",
              es: "/hola-mundo",
            },
          },
          // 其他页面可以继续添加
        ],
        // 其他基础配置（资源文件路径等）
      },
    },
  ],
};

这种方式适合页面数量少、路径固定的场景，配置完就能生效。

方式2：通过createPages API动态生成翻译路径 #

如果是动态页面（比如从Markdown、CMS拉取的内容），或者页面数量较多，可以在gatsby-node.js里结合i18n翻译资源生成对应路径：

1. 先在翻译资源文件（比如locales/es/translation.json）里添加路径的翻译键值对：

{
  "hello-world": "hola-mundo"
}

2. 在gatsby-node.js中编写逻辑，加载翻译资源并生成对应语言的页面：

const fs = require("fs");
const path = require("path");

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;

  // 加载西班牙语翻译文件
  const esTranslations = JSON.parse(
    fs.readFileSync(path.resolve(__dirname, "locales/es/translation.json"), "utf8")
  );

  // 假设你从Markdown获取页面数据，这里替换成你的数据源查询
  const pageData = await graphql(`
    query {
      allMarkdownRemark {
        nodes {
          frontmatter {
            slug
          }
        }
      }
    }
  `);

  // 生成英文和西班牙语页面
  pageData.data.allMarkdownRemark.nodes.forEach(node => {
    // 英文原路径
    createPage({
      path: `/${node.frontmatter.slug}`,
      component: path.resolve("./src/templates/your-page-template.js"),
      context: {
        slug: node.frontmatter.slug,
        language: "en",
      },
    });

    // 西班牙语翻译后的路径
    createPage({
      path: `/es/${esTranslations[node.frontmatter.slug]}`,
      component: path.resolve("./src/templates/your-page-template.js"),
      context: {
        slug: node.frontmatter.slug,
        language: "es",
      },
    });
  });
};

补充：跳转链接时用翻译后的路径 #

页面生成后，跳转链接要确保使用翻译后的路径，比如结合useI18next钩子：

import { Link, useI18next } from "gatsby-plugin-react-i18next";

const PostLink = () => {
  const { t, language } = useI18next();
  return (
    <Link to={`/${language}/${t("hello-world")}`}>
      {t("hello-world")}
    </Link>
  );
};

内容的提问来源于stack exchange，提问作者Cirocki