#28 No-code 之旅 — 客製化 Next.js 的錯誤頁面 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 28

Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 28 篇

#28 No-code 之旅 — 客製化 Next.js 的錯誤頁面

13th鐵人賽 javascript react nextjs chakraui

Jade

2021-10-13 22:51:20

2825 瀏覽

嗨！因為最近系列文快要結束了，所以也準備把專案推上去 production 了。Next.js 有列幾個推 production 之前該注意的事項，其中一項就是錯誤頁面。所以今天的主題是客製化 Next.js 的錯誤頁面～

Error

Error Page (錯誤頁面)

Next.js 有提供很好的方法，讓客製化非常方便喔！這裡講的錯誤頁面是伺服器端發生的錯誤，並不是前端可以用 React 的 error boundary 去處理的。我們來看看吧！

404
上面的圖是原本的 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 喔～

Custom 404

我們可以做自己的 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 去抓取喔～

Custom 500

其他錯誤頁

前後端可能會發生錯誤，所以不只伺服器端需要處理，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