解锁国内 404 页面：Next.js 设置指南和 33 个有趣

2024-04-05 本文已影响0人松桑的前端后花园

前言

当我们访问网站时，如果访问到不存在的路径时，会出现 404 错误。为了避免给访问者带来不良体验，设计网站时通常会在页面上展示“404 页面不存在”的提示，并引导用户进行返回首页等操作。

因此在建立网站时，也要考虑到为网站设计 404 页面，这里松桑分析了国内常见的网站 404 页面现状和思路；此外松桑分享了Nextjs如何设置404页面，并整理了 33 个有趣的 404 图片，助你打造令人耳目一新的 404 页面。

常见网站404页面

百度 404 页面

可以看到访问百度不存在的路径，页面会直接提示服务器不存在对应的路径。

[图片上传失败...(image-559203-1712325423907)]

CSDN 404页面

当访问 CSDN 论坛不存在路径时，可以看到会保留导航头，方便访问者路由到其他内容区；此外还会在下方提示访问的内容不存在，在右侧还会展示下载资源，丝毫不浪费404页面的展示机会。

[图片上传失败...(image-22233d-1712325423907)]

知乎 404 页面

知乎则在页面正中央展示访问不到资源，并引导用户回到首页；在右侧展示知乎的吉祥物logo，比较有辨识度。

[图片上传失败...(image-875ffb-1712325423907)]

掘金 404 页面

掘金测试了两种情况。第一种是和上面一致，在域名后面添加/1，此时掘金会重定向到首页，不会直接展示404页面；第二种情况，将掘金推文id修改为不存在的id，这个情况貌似掘金不会展示自己的404页面，而是有浏览器展示的默认页面，页面只有刷新按钮，无法回到掘金首页。

[图片上传失败...(image-ac0b52-1712325423907)]

简书 404 页面

简书的 404 页面和知乎处理方式类似，会引导回到首页；此外还给简书官方app、微博和公众号引流。

[图片上传失败...(image-234bf2-1712325423907)]

b站 404 页面

b站的 404 页面处理和 CSDN类型，会保留顶部导航栏，方便用户路由。

[图片上传失败...(image-ce53b-1712325423907)]

Nextjs 如何设置 404 页面

分析了国内常见的 404 页面，可以发现它们大都会展示一张标识性图片，并引导用户回到首页。松桑使用 Nextjs 搭建了几个网站，这里也展示下 Nextjs 的 app 路由方式如何设置 404 页面，希望对用 Nextjs app 路由方式搭建网站的小伙伴有所帮助。

1、新增 404.tsx 文件

在app文件夹下新建app/404.tsx文件，此页面会在访问不存在的URL路径，或者在错误处理时调用notFound()函数时，会被渲染展示。

import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

2、引入 404 SVG图片

将图片放在public/404.svg下，并导入app/404.tsx，使用 Image组件传入svg路径。

import Link from 'next/link';
import image%20from "next/image";
import notFoundIcon from '../public/404.svg';


export default function NotFound() {
  return (
    <div className="flex items-center justify-center bg-white h-screen">
        <div className="flex items-center w-1/2">
        <div className='w-3/4'>
            <Image
            src={notFoundIcon}
            alt="404"
            className="w-full h-full"
            />
        </div>
        <div className='w-1/4'>
            <h2 className="text-2xl font-bold">404 Not Found</h2>
            <p>Could not find the requested resource.</p>
            <Link href="/" className="text-blue-500">
                返回首页
            </Link>
        </div>
        </div>
    </div>
  );
}