极客教程Next.js自定义错误页
Next.js 是一个基于React的框架，具有建立完全功能和交互式网站/ Web应用程序所需的所有基础设施。
Next.js 因其附加的优势而被广泛使用，包括创建预渲染的React网站。Next.js提供了许多独特的功能，使许多React开发人员学习了Next.js。在本文中，我们将学习如何在Next.js中创建自定义错误页。
Next.js中的默认错误页： Next.js中的默认错误页是在服务器端或客户端发生错误时默认加载的页面。它通常并不吸引人，并且包含诸如 状态代码 之类的软件术语，对用户不友好。这种信息只对开发人员有用，而对用户没有帮助。
Next.js中的自定义错误页面： 就像在编程语言中处理异常一样，创建自定义错误页面也很重要。自定义错误页面的目标是向用户提供关于错误的清晰信息，使用 自然语言 并协助他们采取进一步的步骤。自定义错误页面的设计仅限于开发者的创造力。
注意： 在开始实际操作之前，请通过以下链接学习如何创建你的第一个Next.js项目。 https://www.geeksforgeeks.org/next-js-introduction/
创建Next.js应用程序：
先决条件：需要安装Node.js 和 npm（Node Package Manager） 在你的系统中。创建和运行Next.js应用程序需要Node.js版本10.13或更高。你可以在这里下载Node.js。
- 在你的系统中打开终端。
- 导航到你想创建Next.js应用程序的目录。
- 输入以下命令来创建一个新的Next.js应用程序。
npx create-next-app@latest gfg_custom_error_page
- 注意，’gfg_custom_error_page’是任意的应用程序名称。
- 输入此命令后，您将被提示提供“是/否”回答以包括项目中的某些功能。您可以使用箭头键在“是”和“否”之间切换，使用“Enter”键进入下一个提示。
- 这将自动为您的项目创建所需的文件结构。
- 创建应用程序后，通过键入以下命令导航到您的项目。
cd gfg_custom_error_page
- 现在我们需要通过输入以下命令安装
package.json文件中列出的所有依赖项。
npm install
文件结构： 一旦您创建了项目，您的项目的文件结构将如下所示。
运行应用程序： 要运行您的应用程序，请在终端中输入以下命令
npm run dev
现在可以通过访问URL（ “http://localhost:3000/” ）使用浏览器来访问您的应用程序。此URL将指向您应用程序域的根目录，也就是 ‘index.js’。
例子 1：客户端错误的自定义错误页面：客户端错误是由客户端错误引起的，例如搜索错误的URL。最常见的客户端错误是 ‘Page Not Found’ 错误，对应的状态码为‘404’。当用户尝试访问不存在的页面时，就会出现这个错误。在Next.js中，当用户尝试访问没有路由的页面时，就会出现此错误。
创建一个自定义错误页面来处理‘404’错误的最简单方法是 覆盖默认的‘404’错误页面 。您可以在项目的‘pages’目录中创建一个名为‘404.js’的JavaScript文件来实现这一点。这样，在HTTP请求期间发生404错误时，加载该页面而不是默认错误页面。
步骤 1：在‘pages’目录中创建一个名为‘404.js’的新文件。
404.js
JavaScript
// import section
import { Typography, Button } from '@mui/material'
import Link from 'next/link'
import React from 'react'
// creation of component
const PageNotFound = () => {
return (
//fragment to print custom error message
<>
<Typography variant='h5'>
Sorry, this page is not
found in GeeksForGeeks !!!
</Typography>
{/* //button to return to home page */}
<Link href='/'><a>
<Button variant='text'>Go to Home</Button></a>
</Link>
</>
)
}
export default PageNotFound
在这段代码中，我们使用了Material-UI进行样式设计。
要为您的项目安装Material-UI，请在当前工作目录为您的项目目录的终端中运行代码。
npm install @material-ui/core
我创建了一个名为“PageNotFound”的React组件，并在其中包含了一个简单的自定义文本消息。我还包含了一个按钮，并将其链接到根目录，即“index.js”。
第2步：在页面目录中创建一个名为“index.js”的新文件。
index.js
JavaScript
//import section
import { Box, Chip, Stack, Typography } from "@mui/material";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
// Component
export default function Home() {
return (
<Box sx={{ marginBottom: 20 }}>
<Head>
<title>Next | Home</title>
<meta name="keyword" content="home" />
</Head>
<Stack alignItems='center' justifyContent='center'>
<Image src="/gfg-new-logo.png" width={500}
height={250} margintop={20} />
<Stack alignSelf='flex-start' spacing={2} mb={10}>
<Typography variant="h3">Hello Geeks!</Typography>
<Typography color="green">
Welcome to GeeksForGeeks!!! Let's learn about
customizing error pages in Next.js.
</Typography>
</Stack>
</Stack>
</Box>
);
}
你可以通过点击以下链接来学习如何给你的网站添加样式：- https://www.geeksforgeeks.org/how-to-add-stylesheet-in-next-js/
执行和输出：
解释
- 我输入了错误的URL，即 ‘”http://localhost:3000/wrong_page” 。
- 这会触发我们自定义的 ‘404.js’ 错误页面。
- 我们成功加载了自定义的404错误页面，而不是Next.js的默认404错误页面。
示例2：用于服务器端错误的自定义错误页面： 到目前为止，我们专注于404错误，这是一个重要的客户端错误。但是如果服务器端出现错误怎么办？幸运的是，Next.js也提供了一种自定义服务器端错误页面的方法。
在以下示例中，我们将处理最常见的服务器端错误，即状态码为 ‘500’ 对应的错误消息为 ‘内部服务器错误’。
先决条件： 要执行即将出现的示例，我们需要一个名为 ‘isomorphic-unfetch’ 的模块。您可以通过转到项目目录并在终端中输入以下命令来安装此模块。
npm i isomorphic-unfetch
我们需要这个模块来获取“关于”页面的数据。
在这个示例中，我通过API从GitHub获取用户数据： https://api.github.com/users/matrixangel1
当在浏览器中输入URL“https://api.github.com/users/matrixangel1”时，会提供用户数据，数据以 JSON格式 呈现，其中“matrixangel1”是一个有效的用户名。在这个例子中，我们将获取“login”和“avatar_url”字段的值，以显示用户名称并相应地显示属于该用户的图片。
步骤1：在“pages”目录中创建一个名为“about.js”的新文件。
about.js
Javascript
import Layout from "../components/Layout";
import fetch from "isomorphic-unfetch";
import Error from './_error';
// import section
import { Component } from "react";
export default class About extends Component {
static async getInitialProps() {
// Fetching user info
const res = await fetch("https://api.github.com/users/wrong_user");
// Checking the status code of the retrieved url
const statusCode = res.status > 200 ? res.status : false;
const data = await res.json();
return { user: data, statusCode };
}
render() {
const { user, statusCode } = this.props;
// Return error page if status code is greater than 200
if (statusCode) {
return <Error statusCode={statusCode} />;
}
// Display of user name and profile picture
return (
<Layout title="About">
<p>{user.login}</p>
<img src={user.avatar_url} alt="Reed" height="200px" />
</Layout>
);
}
}
getInitialProps()方法： 这是Next.js中的数据获取方法。在我们的代码中，它被定义为一个异步方法。要获取的URL作为参数传递给fetch()方法，并使用JSON()方法将响应转换为JSON格式。
render()方法： 一般在React中使用render()方法通过创建一个新的组件来显示数据。在我们的情况下，该函数包含一个条件语句来检查状态码。
要了解更多关于render()方法的信息，请访问此链接。
应用的逻辑： 仅当状态码的值大于200时，render()方法才会返回用户数据。这个逻辑基于状态码200表示“OK”，即成功的HTTP请求，而大于200的任何值通常表示错误。
步骤2：在“pages”目录中创建一个名为“_error.js”的新文件
_error.js
Javascript
//import section
import Layout from "../components/Layout";
export default ({ statusCode }) => (
<Layout title="Error!!!">
{/* //checking the status code */}
{statusCode
? 'user data could not be loaded '
: 'page not found sorry!'}
</Layout>
);
_error.js执行的是与404.js页面完全相同的操作，除了这些页面用于覆盖用于处理错误的错误组件 500状态码 。简而言之，‘404.js’用于自定义客户端错误的错误页面，而_error.js用于自定义服务器端错误的错误页面。
执行和输出：
案例1：获取成功
当我们在fetch()方法中输入 正确的URL来获取数据（”https://api.github.com/users/matrixangel1″） 时，输出将类似于以下图像：
案例2：抓取失败（_error.js加载）
如果你输入一个 不正确的URL ，例如 “https://api.github.com/users/wrong_user” ，你将得到以下输出。
解释:
- 由于输入的URL不正确，页面无法从API获取数据。
- Next.js不会显示错误的堆栈跟踪，而是加载包含自定义错误消息的 ‘_error.js’ 页面。
- 因此，成功构建了一个自定义错误页面来响应服务器端错误。
结论: Next.js提供了基本和高级的方式来开发自定义错误页面。常见错误的错误页面可以通过覆盖默认错误页面轻松处理。Next.js提供了处理客户端和服务器端错误的选项。希望现在您可以向用户提供引人注目的错误页面，而不是可怕的技术术语。