您可以将语言环境转发到 nextjs i18n 中的语言吗？

Question

假设我支持语言 ['en', 'de']，那么我想将带有 header 的请求重定向到 Accept-Language: de-DE 到 de，因为这是我最接近的东西支持。

// This is my i18n config
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de']
  }
};

// Sample requests
// Accept-Language: de-DE    => goes to /en but should be /de
// Accept-Language: en-US,de => goes to /de but should be /en

所以基本上，如果用户请求我没有的特定语言环境，但我支持通用语言，则用户应该获得该语言。这可能吗？

Answer 1

使用`getServerSideProps`方法

您必须将 localDetection 设置为 false

When localeDetection is set to false Next.js will no longer automatically redirect based on the user's preferred locale and will only provide locale information detected from either the locale based domain or locale path as described above.

将 localDetection 设置为 false 将允许我们选择最接近的匹配语言，您仍应提供您支持的 defaultLocale 和 locales

// next.config.js expected to look like
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de', ...],
    localeDetection: false
  }
};

我使用这个 function，我在 GitHub 上找到了最接近的匹配语言环境

使用getServerSideProps函数，我们可以访问requestobject，它是Accept-Languageheader , 获取最接近的语言环境并使用 redirect 属性设置语言环境。

export async function getServerSideProps({
  req,
  locale,
  locales,
  defaultLocale,
}) {
  const closestLocale = findClosestLocale(locales, [
    ...new Set([
      ...getLocales(req.headers["accept-language"], locale),
      locale,
      defaultLocale,
    ]),
  ]);

  if (
    (locale !== defaultLocale || closestLocale !== defaultLocale) &&
    locale !== closestLocale
  ) {
    return {
      redirect: {
        permanent: false,
        destination: `/${closestLocale}`,
      },
    };
  }

  return {
    // will be passed to the page component as props
    // (if there's no need to redirect)
    props: {},
  };
}

我创建了这个简单的函数来从 Accept-Language header 获取语言环境。我认为这应该没问题，但我假设还有其他功能可以涵盖更多情况。

function getLocales(str, defaultLocale) {
  return (
    str
      ?.split(",")
      .map((type) => type.split(";")[0].trim().replace("*", defaultLocale)) ??
    ""
  );
}

在 Automatic Locale Detection 上，Next.js 说

When a user visits the application root (generally /), Next.js will try to automatically detect which locale the user prefers based on the Accept-Language header and the current domain.

我们在将 localDetection 设置为 false 时阻止了此功能，因此仅从 pages/index 文件中导出 getServerSideProps 功能就可以了。强制该文件使用 Server-side render

在我的示例中，我将请求的区域设置硬编码为 'nl-BE'，它将与 nl 语言匹配。

您可以将语言环境转发到 nextjs i18n 中的语言吗？

Can you forward a locale to a language in nextjs i18n?

internationalization

next.js

使用`getServerSideProps`方法

您可以将语言环境转发到 nextjs i18n 中的语言吗？

Can you forward a locale to a language in nextjs i18n?

internationalization

next.js

使用getServerSideProps方法

使用`getServerSideProps`方法