错误页面

404 页面

通过 not-found.tsx 文件定义 404 页面：

next-app/
└── src/
    └── app/
        └── not-found.tsx       # 全局 404 页面

支持嵌套：

next-app/
└── src/
    └── app/
        └── not-found.tsx       # 全局 404 页面
        └── posts/
            ├── page.tsx
            └── not-found.tsx   # posts 路由下的 404 页面

错误页面

通过 error.tsx 文件定义错误页面：

next-app/
└── src/
    └── app/
        └── error.tsx       # 错误页面

可控制错误页面的内容和样式：

'use client'

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <h2>Something went wrong</h2>
      <pre>{error.message}</pre>
      <button onClick={() => reset()}>Try again</button>
    </div>
  )
}

支持嵌套：

next-app/
└── src/
    └── app/
        └── error.tsx       # 全局错误页面
        └── posts/
            └── error.tsx   # posts 路由下的错误页面