javascript 跨不同域路由(Next.JS & i18n)的子路径路由相同区域设置

6gpjuf90  于 2023-01-24  发布在  Java
关注(0)|答案(3)|浏览(199)
    • 手头的任务:**

一个跨多个国家运行的网站,每个国家都有自己的一系列产品/服务/等。它还需要翻译成不同的语言,这取决于国家/顶级域名。翻译语言应该在一些域名上重复。结果应该是这样的:

US
sitename.com - US market, english language (US)

Germany
sitename.de - native language
sitename.de/en - english language (INT)

France
sitename.fr - native language
sitename.fr/en - english language (INT)

Netherlands
sitename.nl - native language
sitename.nl/en - english language (INT)

United Kingdom
sitename.co.uk - english language (GB)
    • 当前状态:**

在我的next.config.js中,我有一个域路由配置,类似于以下示例:

module.exports = {
  ...
  i18n: {
    localeDetection: false,
    defaultLocale: 'en',
    locales: [],
    domains: [
      {
        domain: 'sitename.com',
        defaultLocale: 'en-US', 
        locales: []
      },
      {
        domain: 'sitename.de',
        defaultLocale: 'de-DE', 
        locales: ['en']
      },
      {
        domain: 'sitename.fr',
        defaultLocale: 'fr-FR', 
        locales: ['en']
      },
      {
        domain: 'sitename.nl',
        defaultLocale: 'nl-NL', 
        locales: ['en']
      },
      {
        domain: 'sitename.co.uk',
        defaultLocale: 'en-GB', 
        locales: []
      },
      // list of countries goes on ...
    ]
  }
}

不幸的是,Next.JS不喜欢我的conf想法,并拒绝与我合作,抛出以下错误:

Both sitename.de and sitename.fr configured the locale (en) but only one can. Remove it from one i18n.domains config to continue
Both sitename.fr and sitename.de configured the locale (en) but only one can. Remove it from one i18n.domains config to continue
Both sitename.nl and sitename.de configured the locale (en) but only one can. Remove it from one i18n.domains config to continue
Error: Invalid i18n.domains values:
{"domain":"sitename.de","defaultLocale":"de-DE","locales":["en"]}
{"domain":"sitename.fr","defaultLocale":"fr-FR","locales":["en"]}
{"domain":"sitename.nl","defaultLocale":"nl-NL","locales":["en"]}

domains value must follow format { domain: 'example.fr', defaultLocale: 'fr', locales: ['fr'] }.
See more info here: https://nextjs.org/docs/messages/invalid-i18n-config
    • 问题:**

有没有办法在NEXT.JS中实际实现这种本地化,在NEXT.JS中某些域共享一种语言,但不一定需要列表中的所有其他语言?

2w2cym1i

2w2cym1i1#

1.将所有支持的语言环境添加到i18n根目录上的数组中

locales: ["en-US", "de-DE", "fr-FR", "nl-NL"...]

1.从域项中删除locales数组。只有当你想让那个locale重定向到那个域时才保留。按照你的写法,每个en选项将重定向到3个不同的域

{
        domain: 'sitename.de',
        defaultLocale: 'de-DE', 
        locales: ['en']
      },
      {
        domain: 'sitename.fr',
        defaultLocale: 'fr-FR', 
        locales: ['en']
      },
      {
        domain: 'sitename.nl',
        defaultLocale: 'nl-NL', 
        locales: ['en']
      }

您需要删除该数组,并且仅当您希望该语言环境重定向到该域时才保留该数组。
关于第一部分中的结果,仍然要注意可以使用纯nextjs来实现,因为每个语言环境都有不同的域,并且将被重定向到那里。
有一个解决办法:https://github.com/tomsoderlund/nextjs-multi-domain-locale但对我不起作用。

hiz5n14c

hiz5n14c2#

您可以使用以下方法设置多个域,这些域支持多种语言环境,但不支持域重定向:
1.将区域设置开关代码更改为:

const { pathname, asPath, query } = router
router.push({ pathname, query }, asPath, { locale: newLocale })

改为:

const { pathname, asPath, query, defaultLocale } = router
router.push({ pathname, query }, asPath, {
    locale: newLocale === defaultLocale
        ? 'default-locale'
        : `locale-${newLocale}`
})

这将禁用域路由和重定向,因为使用的区域设置不在列表中。
1.将自定义语言环境重定向到next.config.js中的正确语言环境:

async redirects() {
    return [
        {
            source: '/default-locale/:slug*',
            destination: '/:slug*',
            permanent: false,
        },
        {
            source: '/locale-:locale/:slug*',
            destination: '/:locale/:slug*',
            permanent: false,
        },
    ];
}

1.在next.config.js的i18n部分设置域:

i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
    localeDetection: false,
    domains: [
        {
            domain: 'example.en',
            defaultLocale: 'en',
        },
        {
            domain: 'example.fr',
            defaultLocale: 'fr',
        },
    ],
}

就是这样!

zzzyeukh

zzzyeukh3#

您可能缺少env变量。请与您的团队联系,确认您的.env文件中包含了本地所需的所有内容。

相关问题