跳到主要內容

not-found.js

not-found 檔案用於在路由區段內拋出 notFound 函式時,渲染 UI。除了提供自訂 UI 外,Next.js 將為串流回應返回 200 HTTP 狀態碼,而非串流回應則返回 404

app/not-found.tsx
import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

參考

Props

not-found.js 元件不接受任何 props。

小提示:除了捕獲預期的 notFound() 錯誤外,根目錄 app/not-found.js 檔案還處理整個應用程式中任何不匹配的 URL。這表示訪問應用程式未處理 URL 的使用者將看到 app/not-found.js 檔案輸出的 UI。

範例

資料擷取

預設情況下,not-found 是一個伺服器元件。你可以將其標記為 async 以擷取和顯示資料

app/not-found.tsx
import Link from 'next/link'
import { headers } from 'next/headers'
 
export default async function NotFound() {
  const headersList = await headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  )
}

如果你需要使用客戶端元件的 Hook,例如 usePathname 來顯示基於路徑的內容,則必須在客戶端擷取資料。

版本歷史

版本變更
v13.3.0根目錄 app/not-found 處理全域不匹配的 URL。
v13.0.0引入 not-found