Next.js 如何在 i18n 场景下处理 404 页面

问题

使用 Next.js 框架,app route 模式,404 页面在国际化场景下无法正常使用。

在 Next.js 中的 app route 模式,约定了很多页面的路径,比如 layout.tsxpage.tsx。对于 404 页面,可以使用 not-found.tsx:

tsx 复制代码
import Link from "next/link";

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  );
}

再说回国际化,国际化方案一般使用动态路由,在 app 目录下创建 [lang] 文件夹。

这样就可以在页面中通过 params 获取到当前语言,然后根据语言加载对应的资源。

ts 复制代码
export default function RootLayout({ children, params: { lang } }) {

那么所有的页面都应该在 [lang] 目录下,包括 404 页面。就像这样 app/[lang]/not-found.tsx

问题来了,这样写的话,输入一个不存在的路径,会显示 Next.js 默认的 404 页面,而不是我们自定义的 404 页面。

解决方案

app/[lang] 目录下创建 [...not_found]/page.tsx 文件,用于捕获所有的 404 页面。

tsx 复制代码
// 从 next/navigation 中导入我们自定义的 notFound 方法
import { notFound } from "next/navigation";

export default function NotFoundCatchAll() {
  notFound();
}

这样就 OK 啦~

但是还有一个问题,notFound 不接收任何 Props,所以我们无法在 404 页面中获取到当前语言。

如果你想对 404 页面的文案做国际化,就还需要再做处理。

很简单,不使用 Next.js 的 notFound 方法,自己写一个 components/notFound.tsx 组件。

tsx 复制代码
export default async function NotFound({ lang }) {
  const { t } = await useTranslation(lang, "not-found");
  return <div>{t("404")}</div>;
}

然后在 app/[lang]/[...not_found]/page.tsx 中使用这个组件。

tsx 复制代码
import NotFound from "@/components/common/not-found";

export default function NotFoundCatchAll({ params: { lng } }) {
  return <NotFound lng={lng} />;
}

中文404页面

英文404页面

至此大功告成,完美解决 Next.js 在国际化场景下的 404 页面问题,可以删掉 app/[lang]/not-found.tsx 文件了。

总结

Next.js 一言难尽。

相关推荐
kurcp1 分钟前
vue3 antdesign上传解析excel
前端·typescript·excel
旭久18 分钟前
前端下载文件时浏览器右上角没有保存弹窗及显示进度,下载完之后才会显示保存弹窗的问题定位及解决方案
前端
excel18 分钟前
webpack 模块 第 一 节
前端
excel21 分钟前
webpack 格式化模块 第 七 节
前端
好_快1 小时前
Lodash源码阅读-dropRight
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-drop
前端·javascript·源码阅读
程序猿chen2 小时前
安全岗の夺命连环问:(第壹篇)从XSS到0day的灵魂拷问
前端·git·安全·面试·跳槽·xss·改行学it
前端_yu小白3 小时前
js异步机制
前端·javascript·async·promise·await·js异步·回调地狱
Spider Cat 蜘蛛猫3 小时前
chrome extension开发框架WXT之WXT Storage api解析【补充说明一】
前端·javascript·chrome
程序猿John7 小时前
ES6 新增特性 箭头函数
前端·javascript·es6