前言

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

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

常见网站404页面

百度 404 页面

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

百度 404 页面

CSDN 404页面

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

CSDN 404页面

知乎 404 页面

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

知乎 404 页面

掘金 404 页面

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

掘金 404 页面

简书 404 页面

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

简书 404 页面

b站 404 页面

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

b站 404 页面

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>
  );
}

3、效果预览

这样就完成了 Nextjs app 路由方式的404个性化页面设置了，注意此方法仅使用与 app 路由方式，也就是 Nextjs v13.3.0版本以上支持。

Nextjs app 路由方式的404个性化页面

404 SVG图片资源

大家关心的 404 SVG图片资源是在https://craftwork.design/下载的，会魔法上网的同学可以直接点击下载。由于是国外网站访问速度比较慢，松桑已经整理在后台了，回复【404】即可自取。

404 SVG图片资源

这里是松桑的前端后花园，目前坚持在写前端后花园周刊，专注前端基础领域，分享常见前端面试题、前端开源项目、工具库、前端最新动态，目前还一个前端菜鸟，和我一起打怪升级吧！