Next.js
最后修改时间：2023 年 9 月 8 日IntelliJ IDEA 与Next.js React 框架集成。
在你开始之前
创建一个新的 Next.js 应用程序
开始构建新的 Next.js 应用程序的推荐方法是使用该包，IntelliJ IDEA 使用npxcreate-next-app下载并运行该包。因此，您的开发环境已预先配置为使用 Next.js。
当然，您仍然可以create-next-app自行下载或创建一个空的 IntelliJ IDEA 项目并在其中安装 Next.js。
提示
从Next.js 官方网站了解有关开始使用 Next.js 的更多信息。
使用 create-next-app 生成 Next.js 应用程序
选择文件 | 新 | 从主菜单进行项目或单击欢迎屏幕上的“新建项目”按钮。
在“新建项目”对话框中，在左侧窗格中选择“React” 。
在向导的右侧部分，指定项目名称和要在其中创建项目的文件夹。
在项目类型区域中，选择Next.js。
在“节点解释器”字段中，指定要使用的 Node.js 解释器。从列表中选择已配置的解释器，或选择“添加”以配置新的解释器。
从create-next-app列表中，选择npx create-next-app。
或者，对于 npm 版本 5.1 及更早版本，您可以
create-next-app通过npm install --save-dev next react react-dom在Terminal 中运行来自行安装软件包。创建应用程序时，选择存储包的文件夹。AltF12create-next-app可选：
要使用 TypeScript 而不是 JavaScript，请选中“使用 TypeScript 模板”复选框。IntelliJ IDEA 将为您的应用程序生成.ts文件和tsconfig.json 配置文件。
当您单击Create时，IntelliJ IDEA 会生成一个Next.js特定项目，其中包含所有必需的配置文件并下载所需的依赖项。IntelliJ IDEA 还使用默认设置创建npm start和JavaScript 调试配置，用于运行或调试应用程序。
提示
或者，打开内置终端并输入：
npx create-next-app <application-name>创建一个应用程序。
cd <application-name>切换到应用程序文件夹。
npm start启动 Node.js 服务器。
在空的 IntelliJ IDEA 项目中安装 Next.js
在这种情况下，您必须自己配置构建管道。从Next.js 官方网站了解有关将 Next.js 添加到项目的更多信息。
创建一个空的 IntelliJ IDEA 项目
选择文件 | 新 | 从主菜单进行项目或单击欢迎屏幕上的“新建项目”按钮。
在“新建项目”对话框中，选择左侧窗格中的“新建项目” 。
在右侧窗格中，选择语言区域中的JavaScript。
为新项目命名并根据需要更改其位置，然后单击“创建”。
在空项目中安装 Next.js
打开将在其中使用Next.js 的空项目。
在嵌入式终端( ) 中，键入：AltF12
npm install --save-dev next react react-dom
从现有的 Next.js 应用程序开始
要继续开发现有的 Next.js 应用程序，请在 IntelliJ IDEA 中打开它并下载所需的依赖项。
打开计算机上已有的应用程序源
单击欢迎屏幕上的“打开”或“导入”，或选择“文件”|“导入”。从主菜单打开。在打开的对话框中，选择存储源的文件夹。
从版本控制中检查应用程序源
单击欢迎屏幕上的从 VCS 获取。
或者，选择文件 | 新 | 来自版本控制或Git 的项目| 从主菜单克隆...。
您可能会看到与您的项目关联的任何其他版本控制系统，而不是主菜单中的Git 。例如，Mercurial或Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定用于检查应用程序源的存储库。有关更多信息，请参阅查看项目（克隆）。
下载依赖项
在弹出窗口中单击运行“npm install”或运行“yarn install” ：
您可以使用npm、Yarn 1或Yarn 2 ，详细信息请参阅npm 和 Yarn 。
从编辑器或项目工具窗口中package.json的上下文菜单中选择运行“npm install”或运行“yarn install”。
项目安全
当您打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，您可以在其中决定如何使用不熟悉的源代码处理该项目。
选择以下选项之一：
在安全模式下预览：在这种情况下，IntelliJ IDEA 以预览模式打开项目。这意味着您可以浏览项目的源代码，但无法运行任务和脚本或运行/调试项目。
IntelliJ IDEA 在编辑器区域顶部显示一条通知，您可以单击“信任项目...”链接并随时加载您的项目。
信任项目：在这种情况下，IntelliJ IDEA 打开并加载项目。这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能均可用。
不要打开：在这种情况下，IntelliJ IDEA 不会打开该项目。
从项目安全中了解更多信息。
提示
从欢迎屏幕或通过文件 |创建的项目 新 | 中描述的项目将自动被视为可信。
运行和调试 Next.js 应用程序
请参阅运行和调试 React 应用程序。
感谢您的反馈意见！