#28 No-code 之旅 — 客制化 Next.js 的错误页面
嗨！因为最近系列文快要结束了，所以也准备把专案推上去 production 了。Next.js 有列几个推 production 之前该注意的事项，其中一项就是错误页面。所以今天的主题是客制化 Next.js 的错误页面～
Error Page (错误页面)
Next.js 有提供很好的方法，让客制化非常方便喔！这里讲的错误页面是服务器端发生的错误，并不是前端可以用 React 的 error boundary 去处理的。我们来看看吧！
上面的图是原本的 404 错误页面～
404 页
当服务器端找不到使用者浏览的页面的时候，Next.js 的服务器会回传 404 错误。因为 Next.js 采用 file-based routing，所以服务器端知道有哪些静态的路径，当使用者到了一个不存在的路径，服务器会回传 404。那如果是动态路径 (dynamic routes) 呢？只要是 page 的 getStaticProps 回传 { notFound: true } 或是 getStaticPaths 回传 { fallback: false }，Next.js 的服务器端会回传 404 而浏览器会显示 404 page 喔～
我们可以做自己的 404 页面，像上面那张图，只要新增 pages/404.jsx 档：
// pages/404.jsx
import { Heading, VStack } from "@chakra-ui/layout";
import Head from "next/head";
const Custom404 = () => {
return (
<div>
<Head>
<title>404 - Page Not Found | No-code by Jade</title>
<meta
key="description"
name="description"
content="404 - Page Not Found | No-code personal website by Jade"
/>
</Head>
<main>
<VStack minH="60vh" spacing="8" textAlign="center" justify="center">
<Heading
size="4xl"
bgClip="text"
fontWeight="extrabold"
bgGradient="linear(to-l, #7928CA, #FF0080)"
>
404
</Heading>
<Heading size="xl">Not Found</Heading>
<Heading size="lg">
The page you were looking for does not exist.
</Heading>
</VStack>
</main>
</div>
);
};
export default Custom404;
专案 build time 的时候会产生这 404 错误页面 (静态页面)，如果里面想要放一些资料，可以用 getStaticProps 去抓取喔～
500 页
当服务器端发生错误时然後回传 500 error，Next.js 服务器会回传静态的 500 错误页面给浏览器显示。不过我们可以对这页做客制化喔！只要新增 pages/500.jsx 档：
// pages/500.jsx
export default function Custom500() {
return <h1>500 - Server-side error occurred</h1>
}
跟 404 一样，专案 build time 的时候会产生这 500 错误页面 (静态页面)，如果里面想要放一些资料，可以用 getStaticProps 去抓取喔～
其他错误页
前後端可能会发生错误，所以不只服务器端需要处理，client-side (客户端) 也需要处理。在这里，Next.js 的 <Error> component 比较不是对错误本身做处理，而是显示错误画面给使用者。让使用者知道有错误，还有相关讯息。那我们也可以对这 <Error> 页做客制化～ 新增 pages/_error.jsx 档案来修改：
// pages/_error.jsx
function Error({ statusCode }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: 'An error occurred on client'}
</p>
)
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
return { statusCode }
}
export default Error
小结
网站部署之後，开始会有使用者，我们当然不希望发生任何错误，可是很难避免的Ｑ 那发生错误时，只希望有清楚的画面告诉使用者发生什麽事了。所以今天学会怎麽做 custom error page 之後，也可以看看其他网站怎麽设计他们的错误页面！让使用者心情好一点 (？ＸＤ)
大家想要看看之前的网站可以看这里，或是直接到首页～ 有任何问题可以问我，或是也可以讨论未来要开发的 No-code 专案喔。
祝大家上班上课愉快！
晚安 <3
看更多
- Next.js Going to Production
- Next.js Custom Error Page
- #04 No-code 之旅 — Next.js 中的 Pre-render 与 Data Fetching
- #05 No-code 之旅 — Next.js 的 Pages 与 Routing
[Day04] TS：如何把物件型别的所有属性名称取出变成 union type？试试看 keyof 吧！
前面两天的文章中我们谈到泛型（generics）的使用，以及如何透过 extends 来限制泛型可被...
【Vue】按照文件操作，怎麽还是报错｜macOS 安装 CLI 指令
创建 CLI(command-line interface) 环境前，要先下载 node.js ① ...
[Day13] Node.js ＆ NPM
从头到尾硬干一个网站是非常费功费时的事情，为了节省开发时间就会尽量引用现成的套件，随着引用的套件越来...
Material UI in React [ Day 29 ] Customization Component 自订组件 (part2)
...接续前一篇 2.一次性情况的动态变化 在上一篇中讲解如何覆盖 Material-UI 组件的样...
Day31 ( 电子元件 ) 闪烁的 LED 灯
闪烁的 LED 灯 教学原文参考：闪烁的 LED 灯 这篇文章会介绍如何外接 LED 灯，搭配「数位...