如何在Next.js中重新加载时强制执行i18n语言环境slugs并实现i18n一致性？

html5 • • 问答

我正在使用next-translate. 默认情况下，我的路线被识别如下：

/about         <---
/de/about
/es/about

/about         <---
/de/about
/es/about

但我

/en/about      <---
/de/about
/es/about

/en/about      <---
/de/about
/es/about

想为所有路径强制执行语言环境：

这是我的配置：

下一个.config.js

i18n.js

请注意，我还有一个保留NEXT_LOCALEcookie的 lang 更改组件。因此，我希望当我访问/about并且我的NEXT_LOCALEcookie 之前已设置为 时de，路由器会将我重定向到/de/about. 但事实并非如此。它停留在/about并将cookie重写为en...

这是当前的pages文件夹结构：

...
pages/
  _app.tsx
  _document.tsx
  about.tsx
  ...

我需要将其重组为这个吗？

pages/
  _app.tsx
  _document.tsx
  [lang]/         <---
    about.tsx
    ...

如果是这样，下一步会是什么？

  • 通过解析首选语言环境 useRouter()
  • 解析NEXT_LOCALEcookie
  • 解析langslug

然后决定哪个具有更高的优先级？我应该在哪里做？在_app.tsx/一些 HOC？

我是否需要任何rewrites或redirects在我的next.config.js或我应该通过动态处理这些Router.push？

回答

持久化NEXT_LOCALEcookie 不会根据其值自动重定向的事实是因为您已通过设置localeDetection: false. 这会影响基于标头的重定向以及基于 cookie 的重定向。

只需将其从您的应用程序中删除即可next.config.js解决该问题。

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

module.exports = nextTranslate({
    ...
    i18n: {
        locales: ['en', 'de', 'es'],
        defaultLocale: 'en',
    }
});

没有内置方法可以在所有路径上强制使用默认语言环境。但是，您可以检查默认语言环境并在第一次通过router.push.

让我们假设以下自定义useDefaultLocale钩子抽象了要重用的逻辑。

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

export const useDefaultLocale = () => {
    const router = useRouter();

    useEffect(() => {
        if (router.locale === router.defaultLocale) {
            router.push(`/${router.locale}${router.asPath}`, undefined, {
                locale: false,
                shallow: true // Optionally add this if you don't want to rerun data fetching methods
            });
        }
    }, [router.asPath]);
};

然后可以在您的页面或_app.js.

import { useDefaultLocale } from '<path-to>/use-default-locale';

const AboutPage = () => {
    useDefaultLocale()

    return <>About Page</>;
};

以上是如何在Next.js中重新加载时强制执行i18n语言环境slugs并实现i18n一致性？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>