Next.js16 教程

Next.js CSS方案 在Next.js可以使用多种Css方案，包括： Tailwind CSS(个人推荐) CSS Modules(创建css模块化，类似于Vue的单文件组件) Next.js内

ORM框架(Object-Relational Mapping) 在传统开发模式中，我们需要把数据存储到数据库，所以需要通过SQL语句来进行操作，例如查询 新增 修改 删除等操作，但是SQL语句太多了

next.config.js配置 本章会讲解Next.js的配置文件next.config.js的配置项。注：本章不会讲所有的配置项，只会讲使用率50%的配置项，以及项目中真实使用的配置项。 查看完整

国际化(i18n) 国际化(Internationalization)是Next.js提供的一种机制，用于支持多语言的网站，例如可以实现中英文切换，包括接口同步翻译，以及不同语言所展示的页面不一样等。

环境变量 环境变量一般是指程序在运行时，所需要的一些配置信息，例如数据库连接字符串，API密钥，端口号等。其次就是环境变量跟我们的操作系统有关，例如Linux，Windows，Mac等。 基本用法 我

MDX MDX是一种将Markdown和React组件混合在一起的语法，它可以在Markdown中使用React组件，从而实现更复杂的页面。另外就是我们在编写技术文档或者博客的时候，配合SSG模式，更

服务器函数(Server Actions) 服务器函数指的是可以是服务器组件处理表单的提交，无需手动编写API接口，并且还支持数据的验证，以及状态管理等。 核心原理 是因为React扩展了原生HTML

静态导出SSG Next.js 支持静态站点生成（SSG，Static Site Generation），可以在构建时预先生成所有页面的静态 HTML 文件。这种方式特别适合内容相对固定的站点，如官网

Script组件 Next.js允许我们使用Script组件去加载js脚本(外部/本地脚本)，并且他还对Script组件进行优化。 基本使用 局部引入 src/app/home/page.tsx 在h

font字体 next/font模块，内置了字体优化功能，其目的是防止CLS布局偏移。font模块主要分为两部分，一部分是内置的Google Fonts字体，另一部分是本地字体。 基本用法 Goggl

Image组件 该组件是Next.js内置的图片组件，是基于原生img标签进行扩展，并不代表原生img标签不能使用。 尺寸优化：支持使用现代化图片格式，如webp，avif，apng等,并自动根据设备

缓存策略(Cache Strategies) 缓存策略分两种： 未启用缓存组件: 确保cacheComponents配置为false或者不配置。 src/app/home/page.tsx(新建一个页

缓存组件(Cache Components) 什么是Cache Components? Cache Components 是Next.js(16)版本特有的机制，实现了静态内容 动态内容 缓存内容的混

RSC(React Server Components) RSC(服务器组件)是React19正式引入的一种新的组件类型，它可以在服务器端渲染，也可以在客户端渲染。 像传统的SSR他是在服务器提前把页

渲染基础 本章我们学习 CSR SSR SSG 三种渲染方式,以及Hydration水合的概念。 CSR CSR是Client Side Rendering的缩写，即客户端渲染。像我们使用的Vue R

Proxy代理 如果你想升级为16.x版本，Next.js提供了命令行工具来帮助你升级，只需要执行以下命令即可： 代码转换会将文件和函数名从middleware重命名为proxy。 基本使用 应用场景

AI Vercel提供了AI SDK，可以让我们在Next.js中轻松集成AI功能。AI SDK 官网 安装AI-SDK 这儿我们使用deepseek作为AI模型，@ai-sdk/react封装了流式

路由处理程序(Route Handlers) 路由处理程序，可以让我们在Next.js中编写API接口，并且支持与客户端组件的交互，真正做到了什么叫前后端分离人不分离。 文件结构 定义前端路由页面我们

路由组 路由组也是一种基于文件夹的约定范式，可以让我们开发者，按类别或者团队组织路由模块，并且不影响 URL 路径。 用法：只需要通过(groupName)包裹住文件夹名即可，例如(shop)，(us

平行路由 平行路由指的是在同一布局layout.tsx中，可以同时渲染多个页面，例如team，analytics等，这个东西跟vue的router-view类似。 基本用法 平行路由的使用方法就是通过