莫方教程网

专业程序员编程教程与实战案例分享

解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享

前言

当我们访问网站时,如果访问到不存在的路径时,会出现 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

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图片资源


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

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言