揭秘 Next.js 的图像魔法
揭秘 Next.js 的“图像魔法”：不仅仅是自动压缩 你可能以为 组件只是帮你把图片体积变小了，但实际上，它更像是一个 实时的图像处理引擎 。当你把一张高清大图扔给它时，Next.js 会在服务器端（或构建时）根据用户的设备情况，动态生成最合适的图片版本。 这背后主要依赖以下几个核心机制： 现代格式的自动转码 这是性能提升最显著的一点。你上传的可能是兼容性最好的 JPG 或 PNG，但 Next.js 会检测访问者浏览器的能力。 We...
Next.js App Router 项目，想加个进度条，但是怎么监听页面跳转
问题起因是我想给自己博客页面切换时加一个进度条。博客前端技术栈是 React，使用 Next 做了 SSR。在进度条方面，npm 上有非常成熟的库 。我们只需要调用 和 即可开启和结束进度条。我们监听到页面开始、结束切换的时候，调用 和 即可。但是问题是，Next 13 版本以后推出的 App Router 模式并没有给出监听路由切换的 API。 先来看看 Pages Router 模式的做法： 可以发现，在 npm 上面有一个 Nex...
NextJs从0-1实现一个博客系统
Nextjs 是什么 是一个基于 React 的开源框架，用于构建生产级别的 React 应用程序。它为开发人员提供了一套丰富的工具和约定，使得创建高性能、可扩展的 Web 应用程序变得更加容易。 相关代码 Next.js 的主要特性： 服务器端渲染 (SSR)： 静态站点生成 (SSG)： API 路由： 文件系统路由： 图像优化： TypeScript 支持： 自定义服务器： 插件系统： 安装 使用官网推荐的方式安装，执行 ，输入项...
Nextjs首屏加载速度性能从80分优化到98分
google控制台的网络network去看首次加载资源请求是否有重复加载的情况 google控制台的performance来录制首屏加载过程的文件时长以及阻塞情况,避免一些首次加载无须展示的组件的优化 \ 打包size优化,@next/bundle analyzer可视化的检查页面和打包的资源大小,然后针对性去优化 选择性能指标检测工具我用的 更好的了解真实用户的体验 以上是对性能可视化和测试的工具,方便针对性优化 首先对图片,css进...
NextJs 14 从入门到精通
node 环境 npx、yarn、bun 工具皆可（个人偏好 ，因为它快） 初始化 next 项目 项目目录 安装 autoprefixer 及配置 postcss 从 Layout 开始 app/layout.tsx 是整个应用的主布局文件，相当于React的main.ts或App.tsx，它主要做以下几个事情： 项目 metadata 加载全局样式 globals.css 加载网络/本地字体 定义应用顶级布局 国际化 i18n 第三...
使用NestJS开发小程序后台
前言 前一篇写NestJS的特点，使用NestJS，开启我们的Hello World! 以及NestJS各种热更新方法，本篇会写NestJS在实际项目中的应用。（ORM、参数校验、全局错误处理等等） NestJS 中使用 TypeORM 一、安装依赖 这里假设使用 MySQL 数据库，你可以根据实际情况选择其他数据库驱动。 二、配置数据库连接 1. 在项目根目录下创建一个文件 ，内容如下： 将 、 和 替换为你的实际数据库连接信息。 2...
Next.js 跨域问题的各种解法
本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ 前言 跨域是使用 Next.js 常遇到的问题，问题主要分为两类： 1. 如何调用一个跨域接口？ 2. 如何实现一个跨域接口？ 本篇我们会先从跨域的基础知识开始讲起，然后讲解 Next.js 下这两大类问题的各种解决方案，帮你系统解决跨域问题！快收藏、点赞这篇文章留做备忘吧！ PS：系统学习 Next.js，欢迎入手小册 。基础篇、实战篇、源码篇...
基于 Next.js14的前端工程完整搭建
大家好，这篇文章主要是介绍基于nextjs14 搭建项目基础的最佳实现，并持续更新中，其中路由采用的是官方推荐的 APP router 模式，那咱们话不多说直接上干货。 项目地址： 线上地址： 环境 Next.js 14版本对于Node.js最低的版本要求是 18.17.0 。同时也建议大家 node 版本的选择最好选择双数版本，众所周知 nodejs 的单数版本维护周期较短。同时如果同时有很多项目需要维护建议大家用 nvm 或者 vo...
Next.js渲染方式
几种渲染方式比较 1. SSG（Static Site Generation 静态站点生成）： 在构建时生成页面的静态 HTML 文件，并将其预先存储在服务器上。这样，当用户请求页面时，服务器可以立即提供预先生成的 HTML 内容，而无需动态地生成页面。SSG 可以大大提高网站的性能和加载速度，并且非常适用于内容不经常更改的静态页面。在 Next.js 中，可以通过 函数实现静态站点生成。 2. SSR（Server Side Rend...