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

yyhrrdl8 于 2023-06-22 发布在其他

关注(0)|答案(2)|浏览(134)

我正在将一个项目从next.js7迁移到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，并通过i18 n执行子路由，所以我在next. config.js中添加了这个：

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

唯一的事情是我需要将区域设置传递给服务器端的react-intl的IntlProvider以及所有页面。所以我想我应该在自定义应用程序中执行，getInitialProps返回了一个错误的locale值（始终默认值）。我们不能在custom _app中使用getServerSideProps或getStaticProps。
所以最后！问题是：如何在一个地方访问所有页面的服务器端区域设置？有没有更好的方法来解决这个问题？
（我不能删除intl和工作完全与i18 n现在，它需要这么多的时间为这个特定的项目，我们没有它的ATM！）

next.js

来源：https://stackoverflow.com/questions/65436443/how-to-access-locale-in-custom-app-on-server-side-in-next-js

2条答案

按热度按时间

u59ebvdq1#

您可以通过router属性访问自定义应用的getInitialProps中的locale。

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 i18 n路由文档。

赞(0）回复(0）举报 2023-06-22

wecizke32#

对于其他使用Next js 13和app目录的人，我们可以如下获取locale：

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

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

赞(0）回复(0）举报 2023-06-22

我来回答

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

2条答案

相关问题

热门标签

最新问答