next-upgrade

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Upgrade the current project to the latest Next.js version following official migration guides.

按照官方迁移指南将当前项目升级到最新版本的Next.js。

Detect current version: Read
```
package.json
```
to identify the current Next.js version and related dependencies (React, React DOM, etc.)
Fetch the latest upgrade guide: Use WebFetch to get the official upgrade documentation:
- Codemods: https://nextjs.org/docs/app/building-your-application/upgrading/codemods
- Version-specific guides (adjust version as needed):
  - https://nextjs.org/docs/app/building-your-application/upgrading/version-15
  - https://nextjs.org/docs/app/building-your-application/upgrading/version-14
Determine upgrade path: Based on current version, identify which migration steps apply. For major version jumps, upgrade incrementally (e.g., 13 → 14 → 15).
Run codemods first: Next.js provides codemods to automate breaking changes:
bash
```
npx @next/codemod@latest <transform> <path>
```
Common transforms:
- ```
next-async-request-api
```
  - Updates async Request APIs (v15)
- ```
next-request-geo-ip
```
  - Migrates geo/ip properties (v15)
- ```
next-dynamic-access-named-export
```
  - Transforms dynamic imports (v15)
Update dependencies: Upgrade Next.js and peer dependencies together:
bash
```
npm install next@latest react@latest react-dom@latest
```
Review breaking changes: Check the upgrade guide for manual changes needed:
- API changes (e.g., async params in v15)
- Configuration changes in
```
next.config.js
```
- Deprecated features being removed

Update TypeScript types (if applicable):

bash

npm install @types/react@latest @types/react-dom@latest

Test the upgrade:
- Run
```
npm run build
```
  to check for build errors
- Run
```
npm run dev
```
  and test key functionality

检测当前版本：读取
```
package.json
```
以确定当前Next.js版本及相关依赖（React、React DOM等）
获取最新升级指南：使用WebFetch获取官方升级文档：
- Codemods：https://nextjs.org/docs/app/building-your-application/upgrading/codemods
- 特定版本指南（根据需要调整版本）：
  - https://nextjs.org/docs/app/building-your-application/upgrading/version-15
  - https://nextjs.org/docs/app/building-your-application/upgrading/version-14
确定升级路径：根据当前版本，确定适用的迁移步骤。对于大版本跳跃，逐步升级（例如：13 → 14 → 15）。
先运行codemods：Next.js提供codemods来自动处理破坏性变更：
bash
```
npx @next/codemod@latest <transform> <path>
```
常见转换：
- ```
next-async-request-api
```
  - 更新异步Request API（v15）
- ```
next-request-geo-ip
```
  - 迁移geo/ip属性（v15）
- ```
next-dynamic-access-named-export
```
  - 转换动态导入（v15）
更新依赖：同时升级Next.js和对等依赖：
bash
```
npm install next@latest react@latest react-dom@latest
```
检查破坏性变更：查看升级指南，确认需要手动修改的内容：
- API变更（例如v15中的异步参数）
- ```
next.config.js
```
  中的配置变更
- 已移除的废弃功能

更新TypeScript类型（如适用）：

bash

npm install @types/react@latest @types/react-dom@latest

测试升级：
- 运行
```
npm run build
```
  检查构建错误
- 运行
```
npm run dev
```
  并测试关键功能