Next.js 14.0.1使用use-intl库出现No intl context found错误求助

问题背景 #

使用Next.js 14.0.1（App Router+src目录结构）集成use-intl库时，出现构建/运行错误：

⨯ Error: No intl context found. Have you configured the provider?

已参考官方文档配置，但问题未解决，无法完成项目构建。

项目文件结构 #

src/
├── app/[locale]/
│   └── layout.tsx
├── config/
│   └── i18n.config.ts
├── translations/
│   ├── en.json
│   ├── sk.json
│   └── cz.json
└── middleware.ts

相关代码 #

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>

    )
}

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|.*\\..*).*)']
};

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];

修复方案 #

1. 确保所有国际化组件被Provider包裹 #

检查Navigation、Footer及其他使用use-intl钩子（如useTranslations、useIntl）的组件，必须全部在NextIntlClientProvider内部渲染。当前代码中虽然它们在Provider内，但需确认这些组件没有在其他未被Provider包裹的地方被复用。

另外，代码中SF.variable未看到导入语句，这会导致渲染报错，间接影响Provider初始化，需补充导入或移除该变量。

2. 严格校验Locale类型 #

将params.locale断言为定义好的Locale类型，避免非法值导致Provider异常：

import type { Locale } from '@/config/i18n.config';

// ...
const locale = params.locale as Locale;

3. 修正翻译文件导入路径 #

改用绝对路径导入翻译文件，避免相对路径在Server Component中出现解析问题：

translations = (await import(`@/translations/${locale}.json`)).default;

同时确保所有翻译文件是合法JSON格式，无语法错误。

4. 验证版本兼容性 #

确保next-intl版本适配Next.js 14，执行命令更新到最新兼容版本：

npm install next-intl@latest

5. 测试Provider有效性 #

在页面组件中添加简单测试代码，验证上下文是否正常：

// src/app/[locale]/page.tsx
import { useTranslations } from 'next-intl';

export default function Home() {
  const t = useTranslations('Home');
  return <h1>{t('title')}</h1>;
}

对应的翻译文件（如en.json）需包含：

{
  "Home": {
    "title": "Welcome"
  }
}

内容的提问来源于stack exchange，提问作者George