附录：常用命令与工具汇总

本附录汇总了 Next.js 开发中常用的命令、工具和资源，帮助你更高效地开发 Next.js 应用。

1. Next.js 常用命令

1.1 创建与初始化

命令	描述
`npx create-next-app@latest`	创建新的 Next.js 项目
`npx create-next-app@latest --typescript`	创建 TypeScript Next.js 项目
`npx create-next-app@latest --tailwind`	创建包含 Tailwind CSS 的 Next.js 项目
`npm install`	安装项目依赖

1.2 开发与构建

命令	描述
`npm run dev`	启动开发服务器
`npm run build`	构建生产环境应用
`npm run start`	启动生产环境服务器
`npm run export`	导出静态网站

1.3 其他命令

命令	描述
`npm run lint`	运行 ESLint 检查代码质量
`npm run format`	使用 Prettier 格式化代码
`npm run test`	运行测试

2. VS Code 常用快捷键

2.1 编辑操作

快捷键	描述
`Ctrl + C`	复制
`Ctrl + V`	粘贴
`Ctrl + X`	剪切
`Ctrl + Z`	撤销
`Ctrl + Y`	重做
`Ctrl + F`	查找
`Ctrl + H`	替换
`Ctrl + A`	全选
`Ctrl + D`	选择下一个匹配项
`Alt + ↑/↓`	上下移动行
`Ctrl + Shift + K`	删除行
`Ctrl + Enter`	在下方插入新行
`Ctrl + Shift + Enter`	在上方插入新行

2.2 导航操作

快捷键	描述
`Ctrl + P`	快速打开文件
`Ctrl + Shift + P`	打开命令面板
`Ctrl + G`	跳转到行号
`Ctrl + Shift + O`	跳转到符号
`Alt + ←/→`	前进/后退
`Ctrl + Tab`	切换编辑器标签

2.3 调试操作

快捷键	描述
`F5`	开始调试
`F10`	单步跳过
`F11`	单步进入
`Shift + F11`	单步退出
`Shift + F5`	停止调试

3. 常见问题排查工具

3.1 日志分析

控制台日志：
- 在浏览器开发者工具的 Console 面板查看前端日志
- 在终端查看 Next.js 开发服务器日志
Next.js 日志：
- 开发模式：终端输出的日志
- 生产模式：服务器日志文件
错误监控：
- Sentry：实时错误监控和追踪
- LogRocket：用户会话回放和错误监控

3.2 调试工具

浏览器开发者工具：
- Elements：查看和修改 DOM
- Console：查看控制台日志
- Network：分析网络请求
- Application：查看 localStorage、sessionStorage 等
- Performance：分析性能
- Sources：调试 JavaScript
React Developer Tools：
- Components：查看 React 组件树
- Profiler：分析 React 组件性能
Next.js 特定工具：
- Next.js Dashboard：监控 Next.js 应用
- Vercel Analytics：分析网站访问数据

4. 常用依赖包汇总

4.1 状态管理

包名	描述	安装命令
`zustand`	轻量级状态管理库	`npm install zustand`
`@reduxjs/toolkit`	Redux 官方工具集	`npm install @reduxjs/toolkit react-redux`
`jotai`	原子化状态管理库	`npm install jotai`
`recoil`	Facebook 开发的状态管理库	`npm install recoil`

4.2 数据获取

包名	描述	安装命令
`swr`	React Hooks 数据获取库	`npm install swr`
`react-query`	强大的数据获取和状态管理库	`npm install react-query`
`axios`	HTTP 客户端	`npm install axios`
`graphql`	GraphQL 客户端	`npm install graphql @apollo/client`

4.3 样式

包名	描述	安装命令
`tailwindcss`	实用优先的 CSS 框架	`npm install -D tailwindcss postcss autoprefixer`
`@mui/material`	Material UI 组件库	`npm install @mui/material @emotion/react @emotion/styled`
`antd`	Ant Design 组件库	`npm install antd`
`chakra-ui`	现代化的 UI 组件库	`npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion`
`styled-components`	CSS-in-JS 库	`npm install styled-components`

4.4 表单处理

包名	描述	安装命令
`react-hook-form`	轻量级表单处理库	`npm install react-hook-form`
`formik`	表单管理库	`npm install formik`
`zod`	模式验证库	`npm install zod`
`yup`	表单验证库	`npm install yup`

4.5 动画

包名	描述	安装命令
`framer-motion`	强大的动画库	`npm install framer-motion`
`react-spring`	基于物理的动画库	`npm install react-spring`
`react-transition-group`	React 过渡动画库	`npm install react-transition-group`

4.6 工具库

包名	描述	安装命令
`lodash`	实用工具函数库	`npm install lodash`
`date-fns`	日期处理库	`npm install date-fns`
`uuid`	生成唯一 ID	`npm install uuid`
`classnames`	条件类名管理	`npm install classnames`
`clsx`	条件类名管理	`npm install clsx`

4.7 数据库

包名	描述	安装命令
`mongodb`	MongoDB 客户端	`npm install mongodb`
`pg`	PostgreSQL 客户端	`npm install pg`
`mysql2`	MySQL 客户端	`npm install mysql2`
`sqlite3`	SQLite 客户端	`npm install sqlite3`
`prisma`	数据库 ORM	`npm install prisma`

4.8 认证

包名	描述	安装命令
`next-auth`	Next.js 认证库	`npm install next-auth`
`jsonwebtoken`	JWT 库	`npm install jsonwebtoken`
`bcryptjs`	密码哈希库	`npm install bcryptjs`

4.9 国际化

包名	描述	安装命令
`next-intl`	Next.js 国际化库	`npm install next-intl`
`i18next`	国际化框架	`npm install i18next react-i18next`

4.10 测试

包名	描述	安装命令
`jest`	JavaScript 测试框架	`npm install -D jest`
`react-testing-library`	React 测试库	`npm install -D @testing-library/react @testing-library/jest-dom`
`cypress`	端到端测试框架	`npm install -D cypress`

通过本附录的学习，你已经了解了 Next.js 开发中常用的命令、工具和依赖包。这些资源将帮助你更高效地开发和调试 Next.js 应用。在实际开发中，你应该根据项目的具体需求，选择合适的工具和依赖包，以提高开发效率和代码质量。

祝你开发愉快！