nextjs使用unocss

揭秘 Next.js 的“图像魔法”：不仅仅是自动压缩 你可能以为 组件只是帮你把图片体积变小了，但实际上，它更像是一个 实时的图像处理引擎 。当你把一张高清大图扔给它时，Next.js 会在服务器端（或构建时）根据用户的设备情况，动态生成最合适的图片版本。 这背后主要依赖以下几个核心机制： 现代格式的自动转码 这是性能提升最显著的一点。你上传的可能是兼容性最好的 JPG 或 PNG，但 Next.js 会检测访问者浏览器的能力。 We...

问题起因是我想给自己博客页面切换时加一个进度条。博客前端技术栈是 React，使用 Next 做了 SSR。在进度条方面，npm 上有非常成熟的库 。我们只需要调用 和 即可开启和结束进度条。我们监听到页面开始、结束切换的时候，调用 和 即可。但是问题是，Next 13 版本以后推出的 App Router 模式并没有给出监听路由切换的 API。 先来看看 Pages Router 模式的做法： 可以发现，在 npm 上面有一个 Nex...

Nextjs 是什么 是一个基于 React 的开源框架，用于构建生产级别的 React 应用程序。它为开发人员提供了一套丰富的工具和约定，使得创建高性能、可扩展的 Web 应用程序变得更加容易。 相关代码 Next.js 的主要特性： 服务器端渲染 (SSR)： 静态站点生成 (SSG)： API 路由： 文件系统路由： 图像优化： TypeScript 支持： 自定义服务器： 插件系统： 安装 使用官网推荐的方式安装，执行 ，输入项...

google控制台的网络network去看首次加载资源请求是否有重复加载的情况 google控制台的performance来录制首屏加载过程的文件时长以及阻塞情况,避免一些首次加载无须展示的组件的优化 \ 打包size优化,@next/bundle analyzer可视化的检查页面和打包的资源大小,然后针对性去优化 选择性能指标检测工具我用的 更好的了解真实用户的体验 以上是对性能可视化和测试的工具,方便针对性优化 首先对图片,css进...

node 环境 npx、yarn、bun 工具皆可（个人偏好 ，因为它快） 初始化 next 项目 项目目录 安装 autoprefixer 及配置 postcss 从 Layout 开始 app/layout.tsx 是整个应用的主布局文件，相当于React的main.ts或App.tsx，它主要做以下几个事情： 项目 metadata 加载全局样式 globals.css 加载网络/本地字体 定义应用顶级布局 国际化 i18n 第三...

前言 前一篇写NestJS的特点，使用NestJS，开启我们的Hello World! 以及NestJS各种热更新方法，本篇会写NestJS在实际项目中的应用。（ORM、参数校验、全局错误处理等等） NestJS 中使用 TypeORM 一、安装依赖 这里假设使用 MySQL 数据库，你可以根据实际情况选择其他数据库驱动。 二、配置数据库连接 1. 在项目根目录下创建一个文件 ，内容如下： 将 、 和 替换为你的实际数据库连接信息。 2...