Next.js路由段配置选项笔记
前言
大家好，我是曦远。
本来是想发昨晚写好的 starblog 管理后台重构文章的
结果打开 blog 才发现忘记提交了😂
所以写一篇新的吧
正好最近正在大量使用 Next.js
我发现部署后的首次渲染很慢，才意识到「预热」这个问题
当然这是后话了
这个框架里有大量的官方约定
这些在官方文档里都有的，就是比较分散，本文主要是概括 ...
142.环形链表 II
var detectCycle = function(head) {
if(!head)return null;
let pre=head,cur=head;
while(cur&&cur.next){
pre=pre.next;
cur=cur.next.next;
if(pre===cur){
let temp=head;
while(temp!==pre){
pre=pre.next;
temp=temp. ...
详细介绍：Turbopack介绍（由Vercel开发的基于Rust的高性能前端构建工具，用于挑战传统构建工具Webpack、vite地位）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 ...
实用指南：从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 ...
