跳至內容
建置您的應用程式路由自訂錯誤頁面

自訂錯誤頁面

404 頁面

404 頁面可能會被頻繁存取。每次訪問都伺服器端渲染錯誤頁面會增加 Next.js 伺服器的負載。這可能會導致成本增加和體驗變慢。

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

自訂 404 頁面

要建立自訂的 404 頁面，您可以建立一個 pages/404.js 檔案。這個檔案會在建置時靜態產生。

pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

注意事項：如果您需要在建置時獲取資料，您可以在這個頁面中使用 getStaticProps。

500 頁面

為每次訪問伺服器渲染錯誤頁面會增加回應錯誤的複雜性。為了幫助使用者盡快獲得錯誤回應，Next.js 預設提供靜態 500 頁面，而無需新增任何額外檔案。

自訂 500 頁面

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

pages/500.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

注意事項：如果您需要在建置時獲取資料，您可以在這個頁面中使用 getStaticProps。

更進階的錯誤頁面自訂

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

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

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 stars: {stars}</div>
}

Error 元件也接受 title 作為屬性，如果您想傳遞文字訊息以及 statusCode 的話。

如果您有自訂的 Error 元件，請務必改為匯入該元件。 next/error 匯出 Next.js 使用的預設元件。

注意事項