无法将 i18n 与 next.js 一起使用

Question

我有一个 Next.js 14.2.12 应用程序，运行良好。我一直在尝试向其中添加 i18n，以便可以用巴伦西亚语和西班牙语查看它，但似乎我最终总是遇到相同的错误：

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/react-i18next/dist/es/context.js:22:73)
    at (rsc)/./node_modules/react-i18next/dist/es/context.js (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\vendor-chunks\react-i18next.js:210:1)
    at __webpack_require__ (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-i18next/dist/es/Trans.js:8:69)
    at (rsc)/./node_modules/react-i18next/dist/es/Trans.js (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\vendor-chunks\react-i18next.js:180:1)
    at __webpack_require__ (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/react-i18next/dist/es/index.js:26:67)
    at (rsc)/./node_modules/react-i18next/dist/es/index.js (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\vendor-chunks\react-i18next.js:240:1)
    at __webpack_require__ (C:\Users\olamelas\WebstormProjects\nomenclator\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/[locale]/layout.tsx:15:71) {
  type: 'TypeError',
  page: '/favicon.ico'

我尝试了多种方法，现在我有以下方法：文件结构：

Layout.tsx（最外层文件，服务器组件）：

import {headers} from 'next/headers';
import {Suspense} from 'react';
import Header from '@/components/header/HeaderComponent';
import Footer from '@/components/footer/FooterComponent';
import './globals.css';
import {Spinner} from "react-bootstrap";
import {I18nextProvider} from 'react-i18next';
import i18next from "@/../i18n";

export const metadata = {
    title: 'Some title',
    description: 'Some desc',
};

export default function RootLayout({children}: { children: React.ReactNode }) {
    const requestHeaders = headers();
    const locale = requestHeaders.get('accept-language')?.split(',')[0].slice(0, 2) || 'va';

    i18next.changeLanguage(locale);

    return (
        <I18nextProvider i18n={i18next}>
            <html lang={locale}>
            <body>
            <Suspense fallback={<Spinner/>}>
                <Header/>
                <div style={{width: '80%', minHeight: '60vh', margin: '0 auto'}}>
                    {children}
                </div>
                <Footer/>
            </Suspense>
            </body>
            </html>
        </I18nextProvider>
    );
}

中间件.js：

import {NextResponse} from "next/server";

export function middleware(request) {
    const locale = request.headers.get('accept-language')?.split(',')[0].slice(0, 2) || 'va';
    const response = NextResponse.next();
    response.cookies.set('NEXT_LOCALE', locale);
    return response;
}

export const config = {
    matcher: '/\\.(js|mjs|jsx|ts|tsx)$/'
}

next-i18next.config.mjs：

const config = {
    i18n: {
        defaultLocale: 'va',
        locales: ['es', 'va'],
    },
};

export default config;

i18n.ts：

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import esTranslations from './public/locales/es/common.json';
import vaTranslations from './public/locales/va/common.json';

i18next
    .use(initReactI18next)
    .init({
        lng: 'va',
        fallbackLng: 'va',
        resources: {
            es: {
                translation: esTranslations,
            },
            ca: {
                translation: vaTranslations,
            },
        },
        interpolation: {
            escapeValue: false,
        },
    });

export default i18next;

next.config.mjs：

import nextI18nextConfig from "./next-i18next.config.mjs";

const nextConfig = {
    i18n: nextI18nextConfig.i18n,
};

我现在完全迷失了，欢迎任何帮助导出默认的nextConfig；

Answer 1

您正在尝试在服务器组件上使用客户端组件。

在布局顶部添加

"use client"

。

无法将 i18n 与 next.js 一起使用

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

1个回答

最新问题

无法将 i18n 与 next.js 一起使用

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

1个回答

最新问题

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