文章目录1. 自定义 404 页面路由不存在App Router2. 自定义全局错误页面页面报错2.1 全局错误边界2.2 局部错误边界3. 总结在Next.js 15 App Router下自定义错误页面有两种主要情况需要处理路由找不到404和页面渲染报错Error。1. 自定义 404 页面路由不存在App Router在App Router下你可以在app目录下创建一个特殊的not-found.js文件用于处理路由不存在的情况。app/ not-found.js示例// app/not-found.jsuse client;// 如果需要交互功能importLinkfromnext/link;exportdefaultfunctionNotFound(){return(div style{{textAlign:center,padding:50px}}h1404-页面不存在/h1p抱歉你访问的页面不存在。/pLink href/返回首页/Link/div);}注意事项文件名必须是not-found.js可以使用use client声明为客户端组件以实现交互功能所有未匹配到的路由都会渲染这个组件访问了一个不存在的路由Next.js 会自动渲染not-found.js页面。如图所示2. 自定义全局错误页面页面报错当页面渲染过程中出现异常JS 错误、fetch 报错等可以通过error.js实现局部或全局错误边界。2.1 全局错误边界在app根目录下创建error.jsapp/ error.js示例// app/error.jsuse client;// 错误页面通常是客户端组件import{useEffect}fromreact;exportdefaultfunctionGlobalError({error,reset}){useEffect((){console.error(error);},[error]);return(div style{{textAlign:center,padding:50px}}h1页面出错了 /h1p{error.message}/pbutton onClick{()reset()}重试/button/div);}说明error捕获到的错误对象reset触发重新渲染或重新请求数据的方法支持客户端交互按钮、表单等全局error.js捕获整个 App Router 下的渲染错误如图所示2.2 局部错误边界如果只想捕获某个 layout 或 page 的错误app/ dashboard/ layout.js error.js// app/dashboard/error.jsuse client;exportdefaultfunctionDashboardError({error,reset}){return(divh2Dashboard 加载失败/h2p{error.message}/pbutton onClick{()reset()}重试/button/div);}局部 error.js 只会捕获对应 layout 下的子页面错误不影响其他页面。以在不同 layout 下组合使用实现全局或局部的用户友好错误提示。3. 总结文件名功能位置作用范围not-found.js路由不存在404app/ 或子目录对应目录下未匹配路由error.js页面报错500 / JS 错误app/ 或子目录对应目录下页面渲染异常提示:建议全局 layout 下都有error.jsnot-found.js保证整个网站用户体验统一局部 error.js 用于复杂模块或子系统单独显示错误信息或提供重试逻辑 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目