如何在 Next.js 中创建自定义错误页面？

NextJS 是一个基于反应的框架，它为开发人员提供了生产所需的所有功能。 Next.js 是一个基于反应的框架。它有能力为 Windows、Linux 和 mac 等不同平台开发漂亮的 Web 应用程序。

在这篇文章中，我们将在 Next JS 网站中创建自定义错误页面或自定义 404 页面。

什么是自定义错误/404 页面？

当在服务器上找不到请求的资源或请求的 URL 时显示 404 页面，作为响应，它返回 404 页面。默认情况下 Next Js 提供了一个静态的 404 页面，如下图所示：

默认404/错误页面

创建自定义错误/404 页面

要创建自定义 404 页面，首先需要在 pages 目录中创建一个名为“ 404.js ”的文件。该文件是在构建时静态生成的。

创建一个 404,js 文件

在这个页面中创建和导出一个自定义组件，其余的将由 Next Js 处理。

Javascript

// Inside the "pages/404.js" file add the below code
 
export default function Custom404() {
    return <> YOUR COMPONENT HERE 
}

示例：在 Next.js 中创建自定义错误页面。在404.js文件中写下以下代码。

Javascript

// Inside the "pages/404.js" file
export default function Custom404() {
    return (
        

            

                Welcome to 
                    GeeksForGeeks
                
            
             
Sorry , The page you are looking for can't be found
 
             
Try checking your URL
 
 
            

                This is a 404 page
            
        
    );
}

运行应用程序的步骤：现在要启动开发服务器，您必须在终端中键入以下命令。

npm run dev 

输出：现在让我们转到网站上一个不存在的页面遇到 404 错误。

自定义 404 页面（使用上述代码创建）

注意：如果您需要在构建时获取数据，可以在此页面中使用 getStaticProps。

参考： https://nextjs.org/docs/advanced-features/custom-error-page#404-page