实用指南：从0死磕全栈之Next.js Server Actions 入门实战：在服务端安全执行逻辑，告别 API 路由！
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
从0死磕全栈之Next.js 拦截路由（Intercepting Routes）详解：搭建模态框与上下文保持的利器
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
从0死磕全栈之Next.js 流式渲染（Streaming）实战：实现渐进式加载页面，提升用户体验 - 指南
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
Web典型路由结构之Next.js (App Router, v13+) ）（文件系统驱动的路由：File-based Routing）声明式路由：记录即路由
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
Payload CMS：开发者优先的Next.js原生开源解决优秀的方案，重新定义无头内容管理
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
完整教程：Next.js项目演示（从零创建Next.js项目）Next.js入门实战
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
Next.js + pnpm Docker 构建问题
1. 问题现象
在 Docker 构建过程中，执行：
RUN npm install -g pnpm@10.11.1
时报错：
npm error EEXIST: file already exists
npm error File exists: /usr/local/bin/pnpm
2. 问题原因
基础镜像 node:22-alpine3.21 已经自带了 pnpm。
corepack enable 会在 /usr/local/bin/ 下生成 pnpm 的 shim 文件。
再执行 npm i ...
高性能完整开源电商项目分享 - Next.js + TRpc + Postgre + React的H5&Admin
基于 Next.js 构建的全栈电商解决方案，集成了现代 Web 技术栈
快速开发 代码易懂 方便二开 源码全开源
前言
现在很多开源电商项目有以下问题
开源的都是很老的版本，技术栈老，界面丑陋，不说多 ...
在Next.js中集成swagger文档
在Next.js中集成swagger文档
前言#
最近一直在用 Next.js 开发我的新网站
这次写了一些 API
我就想着能不能像平时开发后端那样，使用 swagger 进行调试
所以进行了一番调研
严格来说 Next.js 本身并不直接支持 swagger，因为 swagger（更准确地说是 OpenAPI 规范）是后端 API 文档的工具，而 Next.js 是 ...
React Server Components (RSC) 与 App Router 简介：Next.js 的未来范式 - 实践
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
深入解析：环境搭建与你的第一个 Next.js 应用
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
next.js和nuxt与普通csr区别 - 详解
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
Next.js 的三种渲染方式（BSR、SSG、SSR）
Jacky
一名奋飞的前端小菜鸟
关注他
55 人赞同了该文章
Next.js 是一个轻量级的 React 服务端渲染框架
它支持三种渲染方式包括
客户端渲染 BSR (Broswer Side Render)
静态页面生成 SSG (Static Site Generation)
服务端渲染 SSR (Server Side Render)
旧瓶装新酒
上 ...
在Next.js中集成swagger文档
前言
最近一直在用 Next.js 开发我的新网站
这次写了一些 API
我就想着能不能像平时开发后端那样，使用 swagger 进行调试
所以进行了一番调研
严格来说 Next.js 本身并不直接支持 swagger，因为 swagger（更准确地说是 OpenAPI 规范）是后端 API 文档的工具，而 Next.js 是一个前端/全栈框架。
不过，如果用 Next.js 的 API ...
Next.js 核心概念及应用
🧩 一、动态路由（Dynamic Routing）
作用：根据 URL 参数动态生成页面，避免硬编码路径。
实现方式：
基础动态路由
• 文件命名：app/blog/[slug]/page.js
• 获取参数：
export default function Page({ params }) {
return {params.slug}; // /blo ...
Next.js 数据获取：使用 getServerSideProps 进行服务器端渲染 - 实践
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
Error: Attempting to parse an unsupported color function "oklab"。html2canvas报错
情况
大致是下面这样的。
Error: Attempting to parse an unsupported color function "oklab" at Object.parse (html2canvas.js:1726:1) at parse (html2canvas.js:3750:1) at new CSSParsedDeclaration (html2canvas.js:3627:1) at new ElementContainer (html2canvas.js:3796:1) at createContainer (html2canvas.js:479 ...
微前端实践：如何让子项目脱离 React Router，优雅支持主项目的 Next.js 路由系统？
在微前端、多模块系统或模块联邦架构中，常见的一个问题是：
子项目是 Vite + React + React Router 构建的组件库，主项目是 Next.js，如何处理 Link 路由跳转？
如果子项目中大量使用了 React Router 的 <Link> 组件，部署到 Next.js 主项目中时就会报错：
Uncaught TypeError: Cannot destructure property 'b ...
next.js 服务器部署
* 安装 npm install -g pm2
npm install -g pm2
* 构建 Next.js 生产环境代码（如果构建失败，需要检查目录下是否有 page或者app目录，两者二选一，不可同时存在）
npm run build【生成 .next 目录】
* 如果构建失败，需要检查目录下是否有 app 或者 pages 目录，两者有且只能有一个
对于较新版本（使用 A ...
手把手教你在 Sevalla 上部署 Next.js 博客：从搭建到上线全流程
很多开发者会纠结：“现在博客平台这么多，为啥还要自己搭博客？”
答案很简单：用 Next.js 搭的博客，是真正属于你的 “数字资产”。
为什么选 Next.js？为什么是 Sevalla？
先聊聊这两个核心工具的优势，帮你搞懂 “为什么这么组合”。
Next.js：不止是博客，更是你的品牌载体
Next.js 是基于 React 的开发框架，相比纯 R ...
