惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

量子位
博客园_首页
罗磊的独立博客
云风的 BLOG
云风的 BLOG
J
Java Code Geeks
Last Week in AI
Last Week in AI
D
DataBreaches.Net
Jina AI
Jina AI
博客园 - Franky
大猫的无限游戏
大猫的无限游戏
Apple Machine Learning Research
Apple Machine Learning Research
V
V2EX
D
Docker
MongoDB | Blog
MongoDB | Blog
B
Blog RSS Feed
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
宝玉的分享
宝玉的分享
Engineering at Meta
Engineering at Meta
The Cloudflare Blog
博客园 - 三生石上(FineUI控件)
有赞技术团队
有赞技术团队
人人都是产品经理
人人都是产品经理
H
Help Net Security
T
The Blog of Author Tim Ferriss

碎言

不懂就别瞎掰掰:【程序员的常识】写的什么玩意? AI 辅助编程下的程序设计与代码编写 使用 Next.js 和 Tailwind CSS 构建可编辑和删除的 ToDo 待办事项应用 探索编程新境界:MarsCode 助你一臂之力 使用 Next.js 和 Tailwind CSS 搭建静态图片展示站点并部署到 Vercel AI 辅助编程:免费工具的优缺点及官网一览 GitHub push更新总是失败,写个python脚本解决 把博客从GitHub迁移到到了vercel ComfyUI 和 Flux.1 安装与使用教程 Flux.1 入门必知:硬件、环境、模型 Git项目的子文件夹中的内容无法同步到远程仓库的解决方法 blender流体Fluid使用中没有流体、流体穿模等一些问题的解决方法 博客聚合网站:积薪,竟然关闭了! blender日常使用中的一些技巧 虽然只有我自己在用,但还是更新了碎言博客的源代码, 与其在迷茫中困惑,不如在努力中前进 差点忘了我还有一个博客... 秧歌、博客和AI 终于熬到了新手上路 好久没有更新博客了。。。 老妈大腿骨骨折,最近一直在医院护理 Hello, September! Ubuntu开机自动启动Docker容器运行WordPress Docker 简单快速安装部署WordPress Docker下安装MySQL 加碘盐能防核辐射的话,还怕什么核战争? shields.io 一个简洁、一致、清晰的徽章 Ubuntu下使用root登录ssh的设置 GitHub Actions 构建、部署 Next.js项目 我又用回了"IE"--edge
在Next.js安装部署 Vercel Web Analytics 与 Speed Insights
J.sky · 2026-01-07 · via 碎言

Speed Insights

如果你的项目托管在Vercel,那么 Web Analytics 与 Speed Insights 是Vercel提供的非常不错的网络分析与用户体验分析工具,值得在项目中安装部署。

Vercel Web Analytics

安装包:

npm i @vercel/analytics

Next.js项目中添加代码:

import { Analytics } from '@vercel/analytics/next';

export default function RootLayout({ children }) {
return (
    <html lang="en">
    <head>
        <title>Next.js</title>
    </head>
    <body>
        {children}
        <Analytics />
    </body>
    </html>
);
}

保存项目,推送到github,这样你就有了一个非常简单的访问统计以及分析了,可以在vercel的控制面板中查看。

Vercel Speed Insights

Speed Insights是用来观测用户真实的访问网站速度体验的,可以直观的看到用户连接网站的访问速度,依次为依据对页面进行优化,已达到最佳的访问速度。而且指标优秀的话,也容易背搜索引擎收录。

安装方法和上边的差不多:

npm i @vercel/speed-insights

项目中插入代码:

import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
return (
    <html lang="en">
    <head>
        <title>Next.js</title>
    </head>
    <body>
        {children}
        <SpeedInsights />
    </body>
    </html>
);
}

保存项目,推送到github,vercel重新构建项目后刷新页面就会看到访问速度的数据了。

总结

通过这这两个插件的数据可以分析站点的访问统计以及访问速度,站长可以根据数据对站点进行优化,使网站已达到最佳的访问状态。