如何使用 NextJS + React-i18next 本地化使规范 URL 按预期工作？

Question

我正在开发一个使用 NextJs 14.2.3 制作的网站。我使用react-i18next 获得本地化支持。

在我的项目中使用react-i18next进行本地化时，我在获取最新NextJs元数据约定生成的正确规范url方面遇到了一些问题。

在本地主机上进行测试时，我得到了预期的行为，例如规范链接我网站上的主页指向“https://mywebsite.dk”，而切换到英语则指向“https://mywebsite.dk/en”。

但是当我在 Vercel 部署上进行测试时，丹麦语默认语言的同一主页指向“https://mywebsite.dk/da”，而英语版本则正确指向“https://mywebsite.dk/en”

我知道react-router-i18n是在react-i18next的背后使用的，并且如果选择默认区域设置作为语言，则defaultLocale用于删除url中的语言前缀。因此，我认为最好的方法是使非语言前缀丹麦语网址成为丹麦语语言选择的规范网址。

我对规范链接指向“/da”仅发生在生产中而不是在本地主机上进行开发的问题感到非常困惑。

有人可以帮助我吗？

i18nConfig.js：

const i18nConfig = {
  locales: [
    'da',
    'en',
    // 'de'
  ],
  defaultLocale: 'da'
}

module.exports = i18nConfig;

i18n.js（可能不相关）：

import { createInstance } from 'i18next';
import { initReactI18next } from 'react-i18next/initReactI18next';
import resourcesToBackend from 'i18next-resources-to-backend';
import i18nConfig from '@/i18nConfig';

export default async function initTranslations(
  locale,
  namespaces,
  i18nInstance,
  resources
) {
  i18nInstance = i18nInstance || createInstance();

  i18nInstance.use(initReactI18next);

  if (!resources) {
    i18nInstance.use(
      resourcesToBackend(
        (language, namespace) =>
          import(`@/locales/${language}/${namespace}.json`)
      )
    );
  }

  await i18nInstance.init({
    lng: locale,
    resources,
    fallbackLng: i18nConfig.defaultLocale,
    supportedLngs: i18nConfig.locales,
    defaultNS: namespaces[0],
    fallbackNS: namespaces[0],
    ns: namespaces,
    preload: resources ? [] : i18nConfig.locales
  });

  return {
    i18n: i18nInstance,
    resources: i18nInstance.services.resourceStore.data,
    t: i18nInstance.t
  };
}

middleware.js（可能不相关）：

import { i18nRouter } from 'next-i18n-router';
import i18nConfig from './i18nConfig';

export function middleware(request) {
  return i18nRouter(request, i18nConfig);
}

// applies this middleware only to files in the app directory
export const config = {
  matcher: '/((?!api|static|.*\\..*|_next).*)'
};

main page.jsx（但所有其他页面都具有相同的规范网址设置）：

export const metadata = {
  metadataBase: new URL("https://mywebsite.dk"),
  alternates: {
    canonical: './',
  },
}

如果您需要更多详细信息，我将很乐意提供。希望有人能够帮助我！

亲切的问候

莫滕

Answer 1

不同页面不能有相同的规范。

示例：

使用规范的 www.site.com/about 作为关于页面，即使使用不同的语言，例如 www.site.com/about-us、www.site.com/about-ar 等

但是不要将规范的 www.site.com/about 用于不同的页面，如联系页面、主页、页面等。

不同用途的页面应该有自己的规范。