如何在 Next.js 中的服务器端访问自定义应用程序中的区域设置？

Question

我正在将一个项目从 next.js 7 迁移到 10。它使用 react-intl 进行翻译，并用 TypeScript 编写。

在之前的版本中，我有一个自定义 server.js 并处理子路由（/de、/fr 等）以实现多语言目的在其中。在自定义应用程序组件中，通过 getInitialProps，我从 req 获取 locale 并将其作为 prop 传递给我的组件。所以整个画面是这样的：
定制应用程序：

static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    const { req } = ctx;
    const { locale, messages } = req || (window as any).__NEXT_DATA__.props;
    const initialNow = Date.now();

    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps, locale, messages, initialNow }
}

还有组件

render() {
        const { Component, pageProps, locale, messages, initialNow } = (this.props as any);
        return (
            <Container>
                <IntlProvider locale={locale} messages={messages} initialNow={initialNow}>
                    <Component {...pageProps} />
                </IntlProvider>
            </Container>
        )
    }

现在，由于我使用的是 next.js 10，由于多种原因，我删除了自定义 server.js 并通过 i18n 进行了子路由，因此我将其添加到 next.config.js 中：

module.exports = {
   i18n: {
        locales: ["en", "de", "fr"],
        defaultLocale: "en",
    },
}

唯一的事情是我需要将语言环境传递给服务器端的react-intl的IntlProvider以及所有页面。所以我想我应该在自定义应用程序中执行此操作，并且 getInitialProps 返回错误的区域设置值（始终是默认值）。而且我们不能在自定义 _app 中使用 getServerSideProps 或 getStaticProps。

最后！问题是： 如何在一个位置访问所有页面的服务器端区域设置？或者有更好的方法来解决这个问题吗？

（我现在无法删除 intl 并完全使用 i18n，这个特定项目需要很多时间，而我们没有自动取款机！）

Answer 1

您可以通过

locale

属性访问自定义应用程序的

getInitialProps

中的

router

。

static async getInitialProps({ Component, ctx, router }) {
    let pageProps = {}

    const { req } = ctx;
    const { locale } = router; // Will return `fr` for `/fr/*` pages
    const { messages } = req || (window as any).__NEXT_DATA__.props;
    const initialNow = Date.now();

    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps, locale, messages, initialNow }
}

---

使用

getServerSideProps

/

getStaticProps

时，在自定义应用程序页面之外，可以直接从上下文对象访问活动区域设置。

export async function getServerSideProps({ locale }) {
    console.log(locale) // Logs current locale    
    // ...
}

export async function getStaticProps({ locale }) {
    console.log(locale) // Logs current locale    
    // ...
}

---

有关更多详细信息，请查看 Next.js i18n 路由文档 .

Answer 2

对于使用 Next js 13 和应用程序目录的其他人，我们可以按如下方式获取区域设置：

import { getLocale } from "next-intl/server";

export default function Home() {
  const locale = getLocale();
  console.log("inside server", locale);
  return (
    <main>
      <div>{locale}</div>
    </main>
  );
}

Answer 3

可以访问

locale

服务器端和客户端，每个端都依赖钩子。 文档链接。

客户端：

import { useLocale } from "next-intl";
const locale = useLocale();

服务器端：

import { getLocale } from "next-intl/server";
const locale = getLocale();