前言
当我们访问网站时,如果访问到不存在的路径时,会出现 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 (
Not Found
Could not find requested resource
Return Home
)
}
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 (
404 Not Found
Could not find the requested resource.
返回首页
);
}
3、效果预览
这样就完成了 Nextjs app 路由方式的404个性化页面设置了,注意此方法仅使用与 app 路由方式,也就是 Nextjs v13.3.0版本以上支持。
Nextjs app 路由方式的404个性化页面
404 SVG图片资源
大家关心的 404 SVG图片资源是在https://craftwork.design/下载的,会魔法上网的同学可以直接点击下载。由于是国外网站访问速度比较慢,松桑已经整理在后台了,回复【404】即可自取。
404 SVG图片资源
这里是松桑的前端后花园,目前坚持在写前端后花园周刊,专注前端基础领域,分享常见前端面试题、前端开源项目、工具库、前端最新动态,目前还一个前端菜鸟,和我一起打怪升级吧!