使用 use-intl 库的 Next.js 应用程序中未发现 intl 上下文错误（NEXTjs 14.0.1）

Question

使用 use-intl 库时，我的 Next.js 应用程序遇到错误。我看到的错误消息是：

⨯ 错误：未找到国际上下文。您配置了提供商吗？

我正在使用 Next.js 版本 14.0.1 我的项目是使用“src”文件夹结构和 App Router 进行组织的。看来这个错误与use-intl库有关。

我附上了我的文件夹结构的图像，包括中间件、配置、语言、布局。

这是我的layout.tsx（路径src/app/[locale]/layout.tsx）

import { notFound } from "next/navigation";
import { NextIntlClientProvider } from "next-intl";

export function generateStaticParams()
{
    return [ { locale: 'en' }, { locale: 'sk' }, { locale: 'cz' } ];
}

export default async function LocaleLayout( { children, params }: {
    children: React.ReactNode;
    params: { locale: string }
} )
{
    const locale = params.locale;
    let translations;
    try
    {
        translations = ( await import(`../../translations/${ locale }.json`) ).default;
    }
    catch( error )
    {
        notFound();
    }


    return (

        <html lang={ locale } className={ `bg-black ${ SF.variable } font-sans` }>
        <body>
        <NextIntlClientProvider locale={ locale } messages={ translations }>

            <main className="space-y-24 md:space-y-40">
                <Navigation/>
                { children }
                <Footer/>
            </main>

        </NextIntlClientProvider>
        </body>
        </html>

    )
}

这是我的middleware.ts（路径src/middleware.ts）

import createMiddleware from 'next-intl/middleware';
import { i18n } from "@/config/i18n.config";

export default createMiddleware(i18n);

export const config = {
    matcher: ['/((?!api|_next|_vercel|.*\\..*).*)']
};

这是我的 i18n.config.ts（路径 src/config/i18n.config.ts）

const defaultLocale = 'en'
const langs = [ defaultLocale, 'sk', 'cz' ] as const;

const locales = langs as unknown as string[];
export const i18n = { defaultLocale, locales, localeDetection: true };
export type Locale = ( typeof langs) [number];

有人可以提供有关如何修复此错误并使用 App Router 和“src”文件夹结构在 Next.js 项目中正确配置 use-intl 库的提供程序的指导吗？预先感谢您！

我一直在尝试根据此处提供的官方文档在我的 Next.js 项目中设置国际化：https://nextjs.org/docs/app/building-your-application/routing/internationalization

没有任何帮助，我也没有找到任何可以解决我的错误的问题。

由于此错误，我无法完成构建。

Answer 1

导入 getMessages 并将其用作消息，它可能会解决您的问题

import { getMessages} from 'next-intl/server';

并在你的 localLayout 中

  const messages = await getMessages();

... ....

使用 use-intl 库的 Next.js 应用程序中未发现 intl 上下文错误（NEXTjs 14.0.1）

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

1个回答

最新问题

使用 use-intl 库的 Next.js 应用程序中未发现 intl 上下文错误（NEXTjs 14.0.1）

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

1个回答

最新问题

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