如何在Next.js 12+项目中配置next-translate？

核心逻辑是将你原有的Next.js配置对象作为参数传入nextTranslate()函数，由它完成多语言配置与原有配置的合并，最终导出合并后的结果即可，不会产生多个module.exports的冲突。

正确配置示例 #

const nextTranslate = require('next-translate');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  // 保留你原有webpack配置或其他自定义配置
  webpack: (config, { isServer, webpack }) => {
    // 这里可以添加你的自定义webpack逻辑，比如新增loader、插件等
    return config;
  }
};

// 将原有配置传入nextTranslate，合并后导出最终配置
module.exports = nextTranslate(nextConfig);

若使用ES Modules语法（如next.config.mjs或配置了ES模块的ts项目） #

import nextTranslate from 'next-translate';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, { isServer, webpack }) => {
    return config;
  }
};

export default nextTranslate(nextConfig);

额外注意 #

别忘了在项目根目录创建i18n.json配置文件，这是next-translate的核心配置文件，示例如下：

{
  "locales": ["en", "zh-CN"],
  "defaultLocale": "en",
  "pages": {
    "*": ["common"],
    "/": ["home"],
    "/about": ["about"]
  }
}

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