小满zs-CSDN博客

原创 Next.js第二十五章(CSS方案)

Next.js CSS方案摘要 Next.js提供多种CSS方案选择：1) Tailwind CSS（推荐）通过原子类快速开发；2) CSS Modules实现模块化样式；3) 内置Sass支持（需安装依赖）；4) 全局CSS通过globals.css文件；5) 内联Style样式；6) CSS-in-JS如styled-components（需额外配置）。Tailwind CSS可通过npx create-next-app初始化或后续安装集成，提供自动补全工具类。CSS Modules通过.module.

2026-02-02 06:01:43 720

原创 Next.js第二十四章(Prisma)

ORM框架与Prisma实践摘要： ORM框架简化了数据库操作，将面向对象代码转换为SQL语句。本文介绍了Prisma ORM框架(7.3.0版本)与PostgreSQL数据库的集成方案。内容包括： PostgreSQL安装方式（官网下载/Docker部署） Prisma环境配置步骤 Schema文件定义模型关系数据库迁移与客户端生成基本CRUD操作实现重点说明了模型关联(@relation)、约束条件(@unique)等注解的使用，以及如何配置PostgreSQL连接。Prisma提供了类型安全且

2026-01-29 08:42:32 779

原创 Next.js第二十三章(Next配置文件)

本文介绍了Next.js配置文件中常用的一些配置项。主要内容包括：根据不同环境(开发/生产)进行差异化配置的方法；如何设置端口号和静态导出站点；配置远程图片加载和图片优化选项；自定义HTTP响应头(如CORS)；设置静态资源CDN前缀和应用基础路径。这些配置涵盖了Next.js项目中50%以上的常见需求，通过next.config.js文件可以灵活控制应用的行为和特性。文中提供了详细代码示例和官方文档参考链接，帮助开发者快速掌握核心配置技巧。

2026-01-25 06:14:48 705

原创 Next.js第二十二章(国际化)

本文介绍了Next.js的国际化(i18n)实现方案。i18n名称来源于"internationalization"中18个字母的缩写。文章详细解释了语言(language)和地区(territory)的ISO标准表示方法(如en-US、zh-CN)，并提供了相关速查表链接。实现原理是通过解析HTTP头中的Accept-Language字段，使用negotiator和intl-localematcher库匹配最佳语言。文中包含完整的代理函数代码示例，展示了如何根据用户语言偏好进行路由重定

2026-01-19 05:33:18 748

原创 Next.js第二十一章(环境变量)

本文介绍了环境变量的基本概念、查询和设置方法，以及在不同操作系统下的使用差异。重点讲解了如何在项目中应用环境变量，包括通过npm脚本设置、使用cross-env解决跨平台问题，以及最佳实践中的.env文件管理方案。通过Next.js示例展示了如何根据开发和生产环境自动加载不同配置，实现环境变量的高效管理。这些方法能帮助开发者灵活处理不同环境下的配置需求，提升项目部署效率。

2026-01-12 21:01:21 764

原创 Next.js第二十章(MDX)

MDX：Markdown与React的完美结合 MDX是一种融合Markdown语法和React组件的技术，让技术文档和博客编写更加灵活高效。文章详细介绍了MDX的配置与使用方法：安装配置：通过npm安装必要依赖，配置next.config.js启用MDX支持基础使用：支持标准Markdown语法、React组件和HTML标签混合编写高级功能：引入自定义React组件实现复杂交互通过mdx-components.tsx全局修改样式支持远程加载MDX文件内容 MDX特别适合Next.js项目，结合

2026-01-05 18:04:51 312

原创 Next.js第十九章(服务器函数)

服务器函数(Server Actions)简化了表单处理流程，无需手动编写API接口即可直接操作数据库。通过扩展HTML表单的action属性绑定服务器函数，自动接收FormData数据。使用bind方法可传递额外参数，结合Zod库实现数据验证，并通过useActionState管理状态。相比传统方式（需前端发起请求→API路由处理→数据库操作），服务器函数直接在服务端完成数据处理，大幅简化开发流程。示例展示了登录表单的实现，包括参数传递、数据验证和状态反馈功能。

2026-01-01 11:13:58 840

原创 2025年终总结

核心聚焦在代码编写与技术学习，每日保持8小时的高强度学习，涵盖前沿框架（如Hono.js）及SEO全栈知识（黑帽/白帽优化、Google工具链）。未来将重点转向Go语言，结合对混合型人才趋势的判断，计划完成当前Next.js项目后系统化学习Go。同步探索Godot引擎，目标一年内开发独立游戏并上架Steam。筹备短剧拍摄小号，策划《程序员真实故事》等系列，运用蒙太奇和希区柯克变焦等影视手法。坚持“传递知识很酷”的理念，通过视频与教程输出技术见解。

2025-12-31 17:04:47 658 2

原创 Next.js第十八章(静态导出SSG)

Next.js静态导出(SSG)功能详解：本文介绍了Next.js中静态站点生成(SSG)的配置方法，包括如何设置静态导出(output: 'export')、处理动态路由(generateStaticParams)、解决页面跳转问题(trailingSlash)以及图片优化方案。文章还列出了SSG模式下不支持的Next.js功能，如动态路由、Cookies、重定向等。通过示例代码展示了如何配置next.config.js、使用自定义图片loader实现图床托管，帮助开发者快速构建高性能静态站点。

2025-12-29 17:07:16 624

原创 Next.js第十七章(Script脚本)

Next.js的Script组件提供了灵活的脚本加载方案，支持局部/全局引入、多种加载策略和内联脚本。通过strategy属性可控制加载时机（beforeInteractive/afterInteractive/lazyOnload/worker），并支持onLoad/onReady/onError事件监听。组件会自动优化脚本加载，实现缓存和按需加载，同时支持直接编写或dangerouslySetInnerHTML方式的内联脚本。注意客户端组件需使用'use client'声明。

2025-12-27 06:10:06 510

原创 Next.js第十六章(font)

Next.js的font模块优化字体加载，包含Google字体和本地字体两种方式。Google字体在构建时下载到本地，支持可变字体调整粗细和样式；本地字体通过src属性指定文件路径。模块提供多种显示策略（swap/fallback等）防止布局偏移，并支持配置字体粗细、样式等属性。使用时只需引入对应字体并设置className即可应用优化后的字体。

2025-12-27 06:07:31 653

原创 Next.js第十五章(Image)

Next.js的Image组件是优化图片显示的内置解决方案，具有尺寸优化、视觉稳定性、懒加载和灵活性等特点。支持本地图片（通过public目录或import引入）和远程图片（需配置next.config.js）。对于LCP图片需设置loading="eager"或preload属性以避免性能警告。支持自动选择最佳图片格式（如AVIF/WebP），并可通过deviceSizes和imageSizes配置适配不同设备。该组件通过生成srcset属性实现响应式图片加载，区分小尺寸图片（如头像）

2025-12-22 10:19:48 791

原创 Next.js第十四章(缓存策略)

本文介绍了Next.js中的缓存策略，主要分为未启用和启用缓存组件两种情况。未启用缓存时，默认会缓存静态内容，可通过四种方案禁用缓存：1) 使用revalidate设置缓存时间；2) 设置dynamic为force-dynamic；3) fetch时设置cache为no-store；4) 使用动态API。启用缓存组件后，所有组件默认为动态内容，无需额外配置。文章通过代码示例和构建符号说明（○静态、ƒ动态、◐部分预渲染）展示了不同缓存策略的效果，帮助开发者根据需求选择合适的缓存方案。

2025-12-18 08:36:43 467

原创 Next.js第十三章(缓存组件)

Next.js缓存组件(Cache Components)技术解析摘要：Next.js 16引入的Cache Components机制实现了静态内容、动态内容和缓存内容的混合编排。静态内容在构建时预渲染成HTML实现快速加载；动态内容通过Suspense实现按需渲染，并配合Partial Prerendering技术，先返回静态外壳再流式传输动态内容；缓存内容则将动态数据缓存后纳入静态外壳。这种方案既保留了静态页面的加载速度，又具备动态渲染的灵活性，解决了传统方案中静态内容无法实时更新和动态页面加载慢的问

2025-12-14 18:30:14 978

原创 Next.js第十二章(RSC/服务端组件/客户端组件)

React Server Components (RSC) 是React19引入的新型组件架构，结合了服务器端和客户端渲染的优势。RSC将组件分为服务器组件（处理静态内容）和客户端组件（处理交互功能），通过流式传输JSON格式的RSC Payload实现高效渲染。服务器组件可直接访问Node.js API和数据库，提高安全性并减小bundle体积；客户端组件则支持浏览器交互功能。这种架构支持局部水合、流式加载，显著提升了FCP性能，同时实现了全栈开发能力，但服务器组件无法使用hooks和浏览器API。

2025-12-02 21:52:55 863

原创 Next.js第十一章(渲染基础概念)

本文介绍了三种网页渲染方式：CSR（客户端渲染）、SSR（服务端渲染）和SSG（静态站点生成）。CSR适合交互性强的应用但首屏加载慢，SSR提升首屏速度和SEO但服务器压力大，SSG则适合静态内容实现极快加载。还解释了Hydration（水合）过程，即JS赋予静态HTML交互能力的关键环节。不同渲染方式各具特点，开发者应根据项目需求（如SEO、加载速度、交互性等）选择合适方案。

2025-11-26 01:52:40 957

原创 Next.js第十章(Proxy)

Next.js 16将中间件(Middleware)更名为代理(Proxy)，功能保持不变。升级可通过命令行工具转换代码。Proxy代理可用于处理跨域请求、接口转发、限流和鉴权等场景，通过配置文件可指定匹配路径。文章详细介绍了基本用法、配置选项（包括简单和复杂匹配规则），并提供了处理跨域请求的实战案例代码。Proxy会拦截所有请求，但可通过config.matcher精确控制拦截范围。

2025-11-23 21:04:14 608

原创 Next.js第九章(AI)

本文介绍了如何在Next.js中集成AI功能。通过Vercel的AI SDK，可以快速实现AI对话功能。主要内容包括：1) 安装AI-SDK及相关模型(如deepseek)；2) 获取API Key；3) 编写后端API接口处理流式响应；4) 前端使用useChat组件实现对话交互，包含消息发送、自动滚动等功能的实现。文章提供了完整的代码示例，展示了如何构建一个简单的AI智能助手应用。

2025-11-21 21:59:16 908

原创 Next.js第八章(路由处理程序)

Next.js路由处理程序(Route Handlers)简介：概述：Next.js的路由处理程序允许开发者创建API接口，并与前端组件交互，实现前后端分离开发。主要功能：通过route.ts文件定义API接口支持RESTful规范，可定义GET/POST/PUT/DELETE等方法支持动态路由参数内置cookie操作使用方式： API接口放在api目录下前后端代码需分开存储可使用REST Client测试接口应用场景：实现用户登录/注册接口处理表单数据管理用户会话(cookie)

2025-11-19 20:42:33 978

原创 Next.js第七章(路由组)

路由组是一种基于文件夹的路由组织方式，使用(groupName)包裹文件夹名即可创建（如(shop)），不影响实际URL路径。它适合按功能或团队模块化路由管理。对于大型项目（如同时包含后台管理系统和门户网站），可通过删除根目录的layout.tsx，在各组目录下单独创建layout.tsx（需包含html和body标签）来实现多根布局，从而隔离不同系统的UI结构。这种方法既能保持项目统一，又能实现逻辑分离。

2025-11-18 13:31:21 447

原创 Next.js第六章(平行路由)

平行路由是Next.js中一种类似Vue路由视图的功能，允许在同一个布局中同时渲染多个页面（如@team、@analytics）。通过文件夹命名约定实现，不影响URL路径。平行路由支持独立加载和错误处理组件，还可嵌套子路由（如@team/setting）。但需注意硬导航刷新可能导致404，需通过default.tsx文件进行兜底处理。平行路由通过props将对应页面注入布局组件，实现多视图同时渲染的效果。

2025-11-18 13:29:43 585

原创 Next.js第五章(动态路由)

动态路由通过方括号[]定义可变路径参数，支持多种灵活配置方式。基本形式如[id]可匹配单个参数（如/shop/123）；[...slug]可捕获多个片段（如/shop/123/456）；[[...slug]]为可选形式，参数可有可无。通过useParams钩子获取参数对象，适用于商品详情等需要动态内容的场景。这些方案使得路由既能处理固定路径，也能灵活适应不同参数组合的需求。

2025-11-17 01:05:43 494

原创 Next.js第四章(路由导航)

Next.js提供四种路由导航方式：1）Link组件，支持预获取和保持滚动位置等功能；2）useRouter Hook用于客户端逻辑跳转；3）redirect函数实现服务端重定向（307状态码）；4）permanentRedirect实现永久重定向（308状态码）。Link适用于常规跳转，useRouter适合编程式导航，redirect/permanentRedirect用于权限验证等场景。注意在Server Actions中默认使用push模式，其他情况下默认replace模式。本文介绍了基本用法和注意

2025-11-12 13:54:21 849

原创 Next.js第三章(App Router)

Next.js采用基于文件系统的路由机制，通过文件和文件夹结构自动生成应用路由。核心路由组件包括page（页面）、layout（布局，保留状态）、template（模板，不保留状态）以及特殊功能组件如loading（加载状态）、error（错误边界）和not-found（404页面）。布局和模板可嵌套使用，其中根布局必须存在。路由文件结构直接映射为URL路径，如app/blog/page.tsx对应/blog路径。开发者只需遵循约定式文件组织规则，Next.js会自动处理路由管理，无需额外配置。该机制简化了

2025-11-11 17:03:17 1229

原创 Next.js第二章(项目搭建)

摘要本文介绍了Next.js 16.0.2版本的快速搭建指南，包括项目创建流程、目录结构说明和核心特性解析。通过npx create-next-app命令可快速初始化项目，支持TypeScript、Tailwind CSS等现代技术栈。重点讲解了Turbopack增量打包器的高效原理、React Compiler的自动优化功能，以及新旧路由系统(App Router与Pages Router)的对比。文章还提供了开发命令参考和常见问题解答，帮助开发者快速上手Next.js项目开发

2025-11-11 16:57:28 1974

原创 Next.js第一章(入门)

Next.js 入门指南：16.0.2版本快速上手摘要：Next.js是一个功能强大的React全栈框架，支持SSR服务端渲染和SSG静态生成，适合构建高性能网站。学习前需掌握HTML/CSS/JavaScript基础及React/TypeScript知识。该框架优势包括SEO优化、AI集成、丰富社区和便捷部署。目前Next.js在npm下载量远超同类框架(Nuxt/Astro/SvelteKit)。环境要求Node.js 20.9+版本，推荐使用专业代码编辑器。

2025-11-11 16:53:28 782

原创小满的五年心得体会(程序人生)

《从程序员到知识分享者：我的成长与思考》讲述了作者小满的职业转变与人生感悟。从工厂工人到月入过万的IT从业者，他经历了报复性消费后的抑郁焦虑，最终通过录制编程教学视频找到人生意义。他提出技术广度和表达能力是获得高薪的关键，并建议程序员提前规划副业应对35岁危机。文章分享了多位转型成功的案例，包括摄影、旅游、创业等方向。作者通过知识分享找到了充实快乐的生活方式，实现了从单纯编码到价值创造的人生跨越。

2025-07-21 13:38:59 2562 2

原创 React(useImmer) 补充篇

useImmer 是一个基于 immer 的 React Hook，它简化了不可变数据的操作。核心特性包括简化状态更新、类型安全和性能优化。安装方式为 npm install immer use-immer。主要 API 为 useImmer，接受初始状态并返回当前状态和更新函数。特别适合处理嵌套对象和数组操作，使代码更直观。对于基本类型，其行为与 useState 相同。此外，useImmerReducer 结合了 useReducer 和 immer 的优势，让 reducer 函数更简洁。典型应用场

2025-07-21 11:26:26 1127

Vue3最新源码分享。

Vue3视频教程.mp4

project.zip

js发布订阅 index.html

空空如也