前言
当我们访问网站时，如果访问到不存在的路径时，会出现 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>
);
}
3、效果预览
这样就完成了 Nextjs app 路由方式的404个性化页面设置了，注意此方法仅使用与 app 路由方式，也就是 Nextjs v13.3.0版本以上支持。
[图片上传失败...(image-fd9f5b-1712325423907)]
404 SVG图片资源
大家关心的 404 SVG图片资源是在https://craftwork.design/下载的，会魔法上网的同学可以直接点击下载。由于是国外网站访问速度比较慢，松桑已经整理在后台了，回复【404】即可自取。
[图片上传失败...(image-96cee2-1712325423907)]
这里是松桑的前端后花园，目前坚持在写前端后花园周刊，专注前端基础领域，分享常见前端面试题、前端开源项目、工具库、前端最新动态，目前还一个前端菜鸟，和我一起打怪升级吧！这里是我精选的往期文章，希望对你有所帮助。
网友评论