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 一言难尽。

相关推荐
你也向往长安城吗11 分钟前
推荐一个三维导航库:three-pathfinding-3d
javascript·算法
imLix12 分钟前
RunLoop 实现原理
前端·ios
wayman_he_何大民18 分钟前
初始机器学习算法 - 关联分析
前端·人工智能
karrigan20 分钟前
async/await 的优雅外衣下:Generator 的核心原理与 JavaScript 执行引擎的精细管理
javascript
飞飞飞仔22 分钟前
别再瞎写提示词了!这份Claude Code优化指南让你效率提升10倍
前端·claude
刘永胜是我22 分钟前
node版本切换
前端·node.js
成小白26 分钟前
前端实现表格下拉框筛选和表头回显和删除
前端
wayman_he_何大民27 分钟前
初始机器学习算法 - 聚类分析
前端·人工智能
wycode29 分钟前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
用户10922571561044 分钟前
你以为的 Tailwind 并不高效,看看这些使用误区
前端