如何抑制 Next.js 应用程序中 next-intl 中的 MISSING_MESSAGE 错误？

Question

我正在开发一个 Next.js 应用程序，使用

next-intl

包进行区域设置处理，并且我正在从外部服务器加载区域设置消息。大多数消息在我的本地开发环境中不存在，这导致大量 MISSING_MESSAGE 错误使控制台混乱并使其难以调试。

我使用的是

next-intl

版本3.25.1，以下代码来自

i18n/request.js

import {getRequestConfig} from 'next-intl/server';
import { routing } from './routing';

export default getRequestConfig(async ({ requestLocale }) => {
    let locale = await requestLocale;

    if (!locale || !routing.locales.includes(locale)) {
        locale = routing.defaultLocale;
    }

    websiteUrl = websiteUrl.replace(process.env.WEBSITE_CONFIG_URL);

    const websiteResponse = await fetch(websiteUrl);
    const websiteResult = await websiteResponse.json();
    const messages = websiteResult.content;
    
    return { 
        locale, 
        messages,
        onError(error) {
            return;
        },
        getMessageFallback({error, key}) {
            return key;
        }
    };
});

调用此代码是因为我的翻译是从服务器加载的，我可以在渲染中看到它们。尽管我提供了 onError 函数来抑制错误，但 MISSING_MESSAGE 错误仍然出现在日志中。如何在开发过程中有效防止这些特定错误出现在我的控制台（终端和浏览器）中？

我尝试过的：

添加一个返回 undefined 的
```
onError
```
处理程序以抑制日志。
设置一个
```
getMessageFallback
```
，将密钥作为后备消息返回。
在
```
onError
```
```
 上添加 
```
NextIntlClientProvider

预期结果：我想要一种方法来过滤或抑制 MISSING_MESSAGE 日志，同时保留调试其他重要消息的能力。

onError

上的

NextIntlClientProvider

会生成错误

Event handlers cannot be passed to Client Component props

，并且当我向服务器消息收费时，此代码可以在客户端上执行。

任何有关如何解决此问题的建议或示例将不胜感激！

Answer 1

我找到了解决办法，看起来我必须将布局分为两部分，一部分由服务器和客户端处理

app/[locale]/layout.jsx

import Head from "next/head";
import { getMessages, setRequestLocale } from 'next-intl/server'
import {notFound} from 'next/navigation';
import {routing} from '../../i18n/routing'
import ClientLayout from "../components/clientLayout";

export default async function RootLayout({ children, params }) {

  const { locale } = await params
  const messages = await getMessages();

  if (!routing.locales.includes(locale)) {
    notFound();
  }

  setRequestLocale(locale);

  return (
    <html lang={locale} >
      <Head>
        <title>Amazing title</title>
        <meta name="description" content="Description 1234" />
        <meta charSet="UTF-8" />
      </Head>

      <body>
        <ClientLayout locale={locale} messages={messages} >
          {children}
        </ClientLayout>
      </body>
    </html>
  );
}

export function generateStaticParams() {
  return routing.locales.map((locale) => ({locale}));
}

然后再为客户提供另一张

'use client'
import { NextIntlClientProvider } from "next-intl";
import Context from "../context";

export default function ClientLayout({ children, locale, messages }) {

    function onError(error) {
        if (error.code === 'MISSING_MESSAGE') return;
        console.error(error)
    }

    return (
        <Context>
            <NextIntlClientProvider
                locale={locale}
                messages={messages}
                timeZone='Europe/Paris'
                onError={onError}
            >
                {children}
            </NextIntlClientProvider>
        </Context>
    )
}

如何抑制 Next.js 应用程序中 next-intl 中的 MISSING_MESSAGE 错误？

问题描述投票：0回答：1

1个回答

最新问题

如何抑制 Next.js 应用程序中 next-intl 中的 MISSING_MESSAGE 错误？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1