自定义

404 页面

在 Next.js 中自定义 404 页面非常简单。你只需要在 pages 目录下创建一个名为 404.js 的文件，Next.js 就会自动将其作为自定义的 404 页面来使用。当用户尝试访问一个不存在的路由时，这个页面就会显示出来。

步骤

1. 创建 404 页面：在你的项目中的 pages 文件夹里创建一个新的文件，并命名为 404.js。

2. 编写 404 组件：在这个文件中定义你的 404 页面组件。你可以根据自己的需求设计这个页面，比如添加特定的消息、样式或链接。

下面是一个简单的例子：

// pages/404.js
export default function Custom404() {
  return (
    <div>
      <h1>404 - 页面未找到</h1>
      <p>抱歉，我们无法找到您正在寻找的页面。</p>
      <a href="/">返回首页</a>
    </div>
  );
}

样式定制

如果你想要为 404 页面添加一些样式，可以使用 CSS 模块或者直接在组件内部使用内联样式。这里有一个使用 CSS 模块的例子：

首先，在 pages 文件夹旁边创建一个 styles 文件夹，并在里面创建一个 FourOhFour.module.css 文件：

/* styles/FourOhFour.module.css */
.container {
  text-align: center;
  padding: 20px;
}

.title {
  font-size: 2em;
  color: #333;
}

.message {
  font-size: 1.2em;
  margin-bottom: 20px;
}

然后，在你的 404.js 文件中引入并使用这些样式：

// pages/404.js
import styles from "../styles/FourOhFour.module.css";

export default function Custom404() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>404 - 页面未找到</h1>
      <p className={styles.message}>抱歉，我们无法找到您正在寻找的页面。</p>
      <a href="/" className={styles.backHome}>
        返回首页
      </a>
    </div>
  );
}

通过这种方式，你可以轻松地自定义你的 404 页面，使其与网站的整体设计风格保持一致，同时提供良好的用户体验。无论用户何时访问了一个不存在的路径，他们都会看到你精心设计的 404 页面，并有机会导航回网站的其他部分。

错误页面

在 Next.js 中，除了可以自定义 404 页面外，你还可以创建一个自定义的错误页面来处理运行时发生的错误。这通常通过 _error.js 或 _error.tsx 文件实现。这个文件应该放在 pages 目录下，用于显示当应用中发生错误时的界面。

创建自定义错误页面

1. 创建 _error.js 或 _error.tsx 文件：在你的项目中的 pages 文件夹里创建一个新的文件，并命名为 _error.js 或 _error.tsx（如果你使用 TypeScript）。

2. 编写错误组件：在这个文件中定义你的错误页面组件。你可以根据自己的需求设计这个页面，比如添加特定的消息、样式或链接。

以下是一个简单的例子：

// pages/_error.js
function Error({ statusCode }) {
  return (
    <p>
      {statusCode ? `服务器发生错误，状态码: ${statusCode}` : "客户端发生错误"}
    </p>
  );
}

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

export default Error;

在这个例子中，Error 组件接收一个 statusCode 属性，该属性决定了显示的是服务器端还是客户端的错误信息。getInitialProps 方法用于获取错误的状态码，如果是在服务端发生的错误，则从 res 对象中获取；如果是客户端错误，则从 err 对象中获取。

样式定制

类似地，你也可以为错误页面添加一些样式。下面是如何结合 CSS 模块来为错误页面添加样式的示例：

首先，在 pages 文件夹旁边创建一个 styles 文件夹，并在里面创建一个 Error.module.css 文件：

/* styles/Error.module.css */
.container {
  text-align: center;
  padding: 50px;
}

.title {
  font-size: 2em;
  color: #d8000c;
}

.message {
  font-size: 1.2em;
  margin-top: 20px;
}

然后，在你的 _error.js 或 _error.tsx 文件中引入并使用这些样式：

// pages/_error.js
import styles from "../styles/Error.module.css";

function Error({ statusCode }) {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>
        {statusCode
          ? `服务器发生错误，状态码: ${statusCode}`
          : "客户端发生错误"}
      </h1>
      <p className={styles.message}>请稍后再试或联系支持。</p>
    </div>
  );
}

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

export default Error;

这样，你就可以拥有一个既美观又功能齐全的自定义错误页面了。无论是遇到服务器端还是客户端的错误，用户都会看到一个友好的错误提示，同时保持与网站整体风格的一致性。