Next.js 备忘清单
Next.js 是一个基于 React.js 的轻量级应用框架,用于构建 SSR(服务器端渲染)和静态站点。它由 Vercel 公司开发并维护,提供了许多有用的功能,包括自动代码拆分、服务器端渲染、静态导出、热模块替换等。
Next.js开发参考备忘单,包含 Next.js 的 API 参考列表和一些示例入门,为开发人员分享快速参考备忘单。
开发速查表大纲
-
入门
创建项目
添加首页
getServerSideProps
getStaticPaths
getStaticProps
增量静态再生
使用 useEffect 客户端数据获取
使用 SWR 获取客户端数据
静态文件服务
支持的浏览器和功能
-
内置 CSS 支持
添加全局样式表
从 node_modules 导入样式
添加组件级 CSS (CSS Modules)
Sass 支持
自定义 Sass 选项
CSS-in-JS
-
Layouts
基础示例
带有自定义应用程序的单一共享布局
使用 TypeScript
每页布局
数据请求
-
图片优化
本地图片
远程图片
Priority
-
优化字体
Google 字体
指定粗细
数组指定多个 weight 或 style
在 <head> 中应用字体
单页使用
指定一个子集
本地字体
使用 Tailwind CSS
-
优化 Scripts
页面脚本
App 脚本
将脚本卸载到 Web Worker(实验性的)
其他属性
内联脚本
执行附加代码
-
ESLint
集成 ESLint
Strict
自定义设置
对自定义目录和文件进行检查
禁用规则
Core Web Vitals
Prettier
lint-staged
-
TypeScript
create-next-app
静态生成和服务端渲染
现有项目添加 ts 配置
API 路由
自定义应用
类型检查 next.config.js
忽略 TypeScript 错误
-
环境变量
加载环境变量
自动扩展 .env* 文件中的变量
向浏览器公开环境变量
-
路由
介绍
具有动态路由的页面
页面之间的链接
链接到动态路径
URL 对象
动态路由
多个动态路由
捕捉所有路由
可选捕获所有路由
事件执行调整页面
浅路由
另见