面试题：Next.js中自定义404页面及相关URL路径处理的最佳实践是什么？

Question

在Next.js项目中，阐述自定义404页面的创建方法以及如何确保相关URL路径能正确引导到该404页面，同时说明与默认404处理机制的差异。

Answer 1

创建自定义404页面

1. 创建页面文件：在Next.js项目的pages目录下，创建一个名为404.js的文件。这是Next.js识别自定义404页面的约定。

import React from 'react';

const Custom404 = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
};

export default Custom404;

2. 样式处理：你可以按照Next.js的常规样式处理方式，为该404页面添加样式。例如，使用CSS Modules，在同目录下创建404.module.css文件，并在404.js中引入。

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

import React from 'react';
import styles from './404.module.css';

const Custom404 = () => {
  return (
    <div className={styles.container}>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
};

export default Custom404;

确保URL路径正确引导到404页面

1. Next.js路由机制：Next.js的路由系统会自动处理未匹配到的路由，将用户引导到自定义的404页面。当用户访问一个不存在的页面路径时，Next.js会检测到没有对应的页面组件，从而渲染pages/404.js。
2. 动态路由与404：对于动态路由（如pages/post/[id].js），如果传入的id在应用逻辑中不存在对应的内容，你可以在页面组件内手动重定向到404页面。例如：

import React from'react';
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { id } = router.query;

  // 假设这里通过API检查id对应的文章是否存在
  const articleExists = false;

  if (!articleExists) {
    router.replace('/404');
  }

  return (
    <div>
      <h1>Post {id}</h1>
    </div>
  );
};

export default Post;

与默认404处理机制的差异

1. 外观与定制性：
   • 默认404：Next.js默认的404处理机制展示一个非常简单的“404 - Not Found”页面，没有太多自定义空间，外观比较简陋。
   • 自定义404：通过创建pages/404.js，开发者可以完全自定义页面的布局、样式和内容。可以添加品牌元素、友好的提示信息、返回首页或其他页面的链接等，提升用户体验。
2. 功能扩展性：
   • 默认404：功能单一，仅告知用户页面不存在。
   • 自定义404：开发者可以在自定义404页面中添加额外功能。例如，添加搜索框，让用户可以搜索网站内可能相关的内容；或者添加错误报告功能，收集用户访问的错误URL等信息，以便开发者进行问题排查。