如何使用nextjs正确设置i18n？

Question

我已经阅读了多篇文章和文档，但我仍然不太清楚我应该如何做到这一点。我主要遵循 vercel next-intl 指南和官方 nextjs 文档。 我的页面都在

/pages/<...>

下，我的

_app.tsx

看起来像这样：

import {NextIntlClientProvider} from 'next-intl';
import {useRouter} from 'next/router';

export default function App({Component, pageProps}) {
    const router = useRouter();

    return (
        <NextIntlClientProvider
            locale={router.locale}
            timeZone="Europe/Vienna"
            messages={pageProps.messages}
        >
            <Component {...pageProps} />
        </NextIntlClientProvider>
    );
}

我的

/pages/index.tsx

看起来像这样：

'use client';
import '../app/globals.css'
import '../styles/page.css'
import { useTranslation } from 'next-i18next';

export async function getStaticProps(context: { locale: any; }) {
    return {
        props: {
            messages: (await import(`../public/locales/${context.locale}/translation.json`)).default
        }
    };
}
const Index: React.FC = () => {
    const { t } = useTranslation();
   
    return (
        <div className="main">
            <div>
                <div>
                    <h1>{t('homepage_welcome')}</h1>
<...>

我的 next.config.js 看起来像这样：

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

我错过了什么？

Answer 1

t 函数必须在 JSON 文件中找到带有翻译值的键“homepage_welcome”。我在提供的代码中没有看到它。我只在提供程序中看到消息道具。另外，您可以在 i18n init 方法中添加 debug: true 来帮助您调试代码。