嗨!因為最近系列文快要結束了,所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該注意的事項,其中一項就是錯誤頁面。所以今天的主題是客製化 Next.js 的錯誤頁面~
Next.js 有提供很好的方法,讓客製化非常方便喔!這裡講的錯誤頁面是伺服器端發生的錯誤,並不是前端可以用 React 的 error boundary 去處理的。我們來看看吧!
上面的圖是原本的 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 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
網站部署之後,開始會有使用者,我們當然不希望發生任何錯誤,可是很難避免的Q 那發生錯誤時,只希望有清楚的畫面告訴使用者發生什麼事了。所以今天學會怎麼做 custom error page 之後,也可以看看其他網站怎麼設計他們的錯誤頁面!讓使用者心情好一點 (?XD)
大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。
祝大家上班上課愉快!
晚安 <3