iT邦幫忙

2021 iThome 鐵人賽

DAY 28
1

嗨!因為最近系列文快要結束了,所以也準備把專案推上去 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

小結

網站部署之後,開始會有使用者,我們當然不希望發生任何錯誤,可是很難避免的Q 那發生錯誤時,只希望有清楚的畫面告訴使用者發生什麼事了。所以今天學會怎麼做 custom error page 之後,也可以看看其他網站怎麼設計他們的錯誤頁面!讓使用者心情好一點 (?XD)

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。

祝大家上班上課愉快!

晚安 <3

看更多


上一篇
#27 No-code 之旅 — 客製化 Favicon ~
下一篇
#29 No-code 之旅 — 部署至 Vercel
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
juck30808
iT邦研究生 1 級 ‧ 2021-10-14 12:08:39

恭喜即將邁入完賽啦~

Jade iT邦新手 5 級 ‧ 2021-10-14 23:29:55 檢舉

謝謝你!好開心~~

我要留言

立即登入留言