Next.js16 教程

服务器函数(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类似。 基本用法 平行路由的使用方法就是通过

动态路由 动态路由是指在路由中使用方括号[]来定义路由参数，例如/blog/[id]，其中[id]就是动态路由参数，因为在某些需求下，我们需要根据不同的id来显示不同的页面内容，例如商品详情页，文章详

路由导航 路由导航是指我们在Next.js中跳转页面的方式，例如原始的<a>标签，等。 在Next.js中，共有四种方式提供跳转: Link组件 useRouter Hook (客户端组件) redi

Next.js 路由概览 Next.js 使用基于文件系统的路由，这意味着文件和文件夹的结构直接决定了应用的路由结构。 基于文件系统的路由 我们只需要创建对应的文件和文件夹，Next.js 会自动生成

Next.js 项目搭建 创建项目 快速入门 注： 当前教程为16.0.1版本，最低Node.js版本为20.9.0 接下来会有几个问题需要你选择，根据你的需求选择即可 What is your pr

开始使用 Next.js 欢迎来到 Next.js 学习之旅！本教程将带你从零开始创建你的第一个 Next.js 应用。 我们所学的版本是16.0.1 什么是 Next.js？ Next.js是一个基