如何用create-next-app创建NextJS 12版本项目而非最新版本

方法一：使用create-next-app直接指定版本（推荐） #

这是最快捷的方式，一步生成符合要求的项目：

• 打开终端，运行以下命令（将my-udemy-project替换为你的项目名称）：

  npx create-next-app@12 my-udemy-project
  

  若课程要求具体小版本（比如12.3.4），可以指定完整版本号：

  npx create-next-app@12.3.4 my-udemy-project
  

• 进入项目目录：

  cd my-udemy-project
  

• 验证安装的Next.js版本：

  npm list next
  

  输出结果会显示当前项目的Next.js版本，确认是12.x系列即可。

方法二：手动初始化项目（适合自定义配置） #

如果需要更灵活的项目结构，可以手动搭建：

1. 创建项目文件夹并进入：

   mkdir my-udemy-project && cd my-udemy-project
   

2. 初始化npm项目：

   npm init -y
   

3. 安装Next.js 12及对应版本的React、React DOM（Next.js 12通常搭配React 17，若课程有特殊要求可调整）：

   npm install next@12 react@17 react-dom@17
   

4. 在package.json中添加Next.js脚本：
   修改scripts字段为：

   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start"
   }
   

5. 创建核心页面文件：

   mkdir pages
   echo "export default function Home() { return <h1>Hello Next.js 12</h1> }" > pages/index.js
   

6. 启动开发服务器：

   npm run dev
   

注意事项 #

• 若使用Yarn包管理器，将上述npm命令替换为yarn：
  • 快速创建项目：yarn create next-app@12 my-udemy-project
  • 安装依赖：yarn add next@12 react@17 react-dom@17
• 确保本地Node.js版本符合Next.js 12的要求（推荐Node.js 14.6.0或更高版本）。

内容的提问来源于stack exchange，提问作者Alperen