NotFound 不适用于 Next.js 14.x、i18NextJs

Question

我正在使用

i18NextJs

和 Next.js 14
中的 App router
进行工作。我的 next-i18n-router
，custom
和
default 都没有按预期工作。我在 NotFound pages 组件中看到有关缺少 <html>
和 <body>
标签的错误，但我似乎无法解决该问题。我尝试了几次调整，但似乎没有任何效果。收到此
错误消息：

RootLayout

错误图片：

i18NextJs NotFound not working : Missing required html tags
The following tags are missing in the Root Layout: , .
Read more at https://nextjs.org/docs/messages/missing-root-layout-tags 服务器错误日志：

Missing required html tags The following tags are missing in the Root Layout: <html>, <body>. Read more at https://nextjs.org/docs/messages/missing-root-layout-tags

✓ Compiled /favicon.ico in 77ms
 ⚠ ./middleware.ts
Unable to parse config export in source file
The exported configuration object in a source file need to have a very specific format from which some properties can be statically parsed at compiled-time.

还没有使用过‘使用客户端’

layout.tsx

另外，尝试了这个：

interface RootLayoutProps { children: React.ReactNode; params: { locale: string; }; } export default function RootLayout({ children, params: { locale }, }: Readonly<RootLayoutProps>) { if (!i18nConfig.locales.includes(locale)) { notFound(); } return ( <html lang={locale} className="light scroll-smooth" dir={dir(locale)}> <body className={`${poppins.variable} font-poppins text-[15px] text-slate-900 dark:text-white dark:bg-slate-900`} > {children} </body> </html> ); }

export default function RootLayout({
  children,
  params: { locale },
}: Readonly<RootLayoutProps>) {

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

  return (
    <html lang={locale} className="light scroll-smooth" dir={dir(locale)}>
      <body
        className={`${poppins.variable} font-poppins text-[15px] text-slate-900 dark:text-white dark:bg-slate-900`}
      >
        {children}
      </body>
    </html>
  );
}

i18nConfig.ts

const i18nConfig = {
  locales: ["en", "ar"],
  defaultLocale: "en",
  prefixDefault: true,
};

export default i18nConfig;

i18n.ts

import { createInstance } from "i18next";
import { initReactI18next } from "react-i18next/initReactI18next";
import resourcesToBackend from "i18next-resources-to-backend";
import i18nConfig from "@/i18nConfig";

export default async function initTranslations(
  locale: any,
  namespaces: any,
  i18nInstance: any,
  resources: any
) {
  i18nInstance = i18nInstance || createInstance();

  i18nInstance.use(initReactI18next);

  if (!resources) {
    i18nInstance.use(
      resourcesToBackend(
        (language: any, namespace: any) =>
          import(`@/locales/${language}/${namespace}.json`)
      )
    );
  }

  await i18nInstance.init({
    lng: locale,
    resources,
    fallbackLng: i18nConfig.defaultLocale,
    supportedLngs: i18nConfig.locales,
    defaultNS: namespaces[0],
    fallbackNS: namespaces[0],
    ns: namespaces,
    preload: resources ? [] : i18nConfig.locales,
  });

  return {
    i18n: i18nInstance,
    resources: i18nInstance.services.resourceStore.data,
    t: i18nInstance.t,
  };
}

middleware.tsx

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { i18nRouter } from "next-i18n-router";
import i18nConfig from "./i18nConfig";

export function middleware(request: NextRequest) {
  const response = i18nRouter(request, i18nConfig);
  return response;
}

export const config = {
  matcher: ["/((?!api|static|.*\\..*|_next).*)", { source: "/" }],
};

Files & Folders Arch.

package.json

如何解决这个问题？

使用 Catch-all Segments 来解决。

Answer 1

在您的

[...notFound]

目录下。它将捕获任何无效路由，例如 [locale]
，并正确返回 404 / Custome NotFound 页面。
/en/some-unknown-path

files and folders arch.

- app
  |- [locale]
      |- [...notFound]
          |- page.tsx   // catch-all segment
      |- layout.tsx     // layout component for different locales
- middleware.ts         // middleware for handling localization

page.tsx:

NotFound 不适用于 Next.js 14.x、i18NextJs

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

1个回答

最新问题

NotFound 不适用于 Next.js 14.x、i18NextJs

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

1个回答

最新问题

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