如何在 Next.js 应用程序中开发一个自定义 404 页面-JavaScript中文网-JavaScript教程资源分享门户

背景

在开发 Web 应用程序时，我们经常需要为用户提供一个友好的 404 页面，以便他们在 URL 输入错误或请求不存在的页面时能够得到良好的提示。在 Next.js 应用程序中开发一个自定义的 404 页面也很简单，只需要遵循一些简单的步骤即可。

思路

在 Next.js 中，我们可以通过自定义 _error.js 文件来实现自定义 404 页面。当 Next.js 检测到应用程序返回 404 错误时，它将自动调用 _error.js 文件，从而显示自定义的 404 页面。因此，我们可以通过在 _error.js 文件中编写一些代码来实现自定义 404 页面。

实现

现在让我们来看一下如何在 Next.js 应用程序中开发一个自定义的 404 页面。

在你的 Next.js 应用程序中创建一个新文件夹 pages，然后在该文件夹中创建一个新文件 _error.js。
在 _error.js 文件中，我们需要导入 React，然后创建一个 React 组件 Error，该组件将作为自定义 404 页面的内容。代码示例如下：

// javascriptcn.com 代码示例
import React from 'react';

const Error = () => {
    return (
        <div>
            <h1>404 Not Found</h1>
            <p>The requested page does not exist.</p>
        </div>
    );
};

export default Error;

最后，我们需要在 _error.js 文件中实现 getInitialProps 方法。这个方法将在服务器端和客户端执行，并且可以用来获取当前的错误信息。在这里，我们可以通过检查 statusCode 属性来判断是否是 404 错误，然后返回一个自定义的响应。代码示例如下：

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

    return { statusCode };
};

现在，我们已经成功地为 Next.js 应用程序开发了一个自定义的 404 页面。当应用程序遇到 404 错误时，它将自动调用 _error.js 文件，并显示我们所编写的自定义 404 页面。

总结

在这篇文章中，我们介绍了如何在 Next.js 应用程序中开发一个自定义的 404 页面。通过遵循上述步骤，我们可以轻松地为我们的应用程序提供一个友好的 404 页面，使用户能够得到良好的提示。此外，我们还提供了代码示例，以帮助你更好地理解如何实现。希望本文能够对你有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652b6df17d4982a6ebd556e4