自訂錯誤頁面

404 頁面

404 頁面可能會被頻繁存取。每次訪問都進行伺服器渲染 (SSR) 錯誤頁面會增加 Next.js 伺服器的負載，可能導致成本上升和使用體驗變慢。

為避免上述問題，Next.js 預設提供了一個靜態 404 頁面，無需添加任何額外檔案。

自訂 404 頁面

要建立自訂 404 頁面，您可以建立一個 pages/404.js 檔案。此檔案會在構建時靜態生成。

pages/404.js

export default function Custom404() {
  return <h1>404 - 頁面不存在</h1>
}

須知：如果您需要在構建時獲取資料，可以在這個頁面中使用 getStaticProps。

500 頁面

每次訪問都進行伺服器渲染 (SSR) 錯誤頁面會增加錯誤處理的複雜度。為了幫助使用者盡快獲得錯誤回應，Next.js 預設提供了一個靜態 500 頁面，無需添加任何額外檔案。

自訂 500 頁面

要自訂 500 頁面，您可以建立一個 pages/500.js 檔案。此檔案會在構建時靜態生成。

pages/500.js

export default function Custom500() {
  return <h1>500 - 伺服器端發生錯誤</h1>
}

須知：如果您需要在構建時獲取資料，可以在這個頁面中使用 getStaticProps。

進階錯誤頁面自訂

500 錯誤會由 Error 元件在客戶端和伺服器端處理。如果您想覆寫它，請定義 pages/_error.js 檔案並添加以下程式碼：

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `伺服器發生 ${statusCode} 錯誤`
        : '客戶端發生錯誤'}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

pages/_error.js 僅在生產環境中使用。在開發環境中，您會看到包含錯誤來源呼叫堆疊的錯誤訊息。

重用內建錯誤頁面

如果您想渲染內建的錯誤頁面，可以通過導入 Error 元件來實現：

import Error from 'next/error'

export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const errorCode = res.ok ? false : res.status
  const json = await res.json()

  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}

export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }

  return <div>Next.js 星標數: {stars}</div>
}

Error 元件也接受 title 屬性，如果您想連同 statusCode 一起傳遞文字訊息。

如果您有自訂的 Error 元件，請確保導入的是該元件而非預設元件。next/error 導出的是 Next.js 使用的預設元件。

注意事項

Error 目前不支援 Next.js 的資料獲取方法，例如 getStaticProps 或 getServerSideProps。
_error 和 _app 一樣是保留的路徑名稱。_error 用於定義錯誤頁面的自訂佈局和行為。直接通過路由存取或透過自訂伺服器渲染時，/_error 會顯示 404 頁面。