如何在 Next.js 的服务器端访问自定义应用程序中的语言环境? [英] How to access locale in custom app on server-side in Next.js?

问题描述

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

在之前的版本中，我有一个自定义 server.js 并处理 sub-routing(/de、/fr 等)用于多语言目的在其中强>.在自定义应用程序组件中，通过 getInitialProps，我从 req 获取 locale 并将其作为道具传递给我的组件.所以整个画面是这样的:
自定义应用:

I'm migrating a project from next.js 7 to 10. It uses react-intl for translations and was written in TypeScript.

In the previous version I had a custom server.js and handled sub-routing (/de, /fr, etc.) for multilingual purposes in it. And in custom app component, through the getInitialProps, I was getting locale from req and passed it as a prop to my component. So the whole picture was something like this:
Custom app:

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 中添加了这个:

Now since I'm using next.js 10, for many reasons I removed the custom server.js and did the sub-routing through i18n, so I added this in next.config.js:

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

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

The only thing is that I need to pass the locale to IntlProvider of react-intl in server-side and for all the pages. So I suppose I should do it in custom app and getInitialProps returns a wrong value for locale (always default). And we can't use getServerSideProps or getStaticProps in custom _app.

最后！问题是:如何在一个地方为我的所有页面访问服务器端的语言环境?或者有没有更好的方法来解决这个问题?

So finally! the question is: How can I access the locale on server-side in one place for all of my pages? Or is there a better approach to solve this issue?

(我现在无法删除 intl 并完全使用 i18n，这个特定项目需要很多时间，而我们没有 atm！)

(I can't remove intl and work fully with i18n for now, it needs so much time for this particular project and we don't have it atm!)

推荐答案

您可以通过 router 访问自定义应用的 getInitialProps 中的 locale> 道具.

You can access the locale in your custom app's getInitialProps through the router prop.

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 时，可以直接从上下文对象访问活动区域设置.

---

When using getServerSideProps/getStaticProps, outside custom app pages, the active locale can be accessed directly from the context object.

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 路由文档 .

这篇关于如何在 Next.js 的服务器端访问自定义应用程序中的语言环境?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！