IntelliJ IDEA 2025.1 Help

Next.js

IntelliJ IDEA 与 Next.js React 框架集成。

开始之前

  1. 下载并安装 Node.js。

  2. 确保 JavaScript 和 TypeScript 以及 Next.js Support 必需插件在 设置 | 插件 页面, 已安装 选项卡上已启用。 如需更多信息,请参阅 管理插件。

创建新的 Next.js 应用程序

推荐开始构建新的 Next.js 应用程序的方法是 create-next-app 包,该包使用 npx 为您IntelliJ IDEA下载和运行。 因此,您的开发环境已预配置为使用 Next.js。

当然,您仍然可以自行下载 create-next-app 或者创建一个空的 IntelliJ IDEA 项目并在其中安装 Next.js。

使用 create-next-app 生成 Next.js 应用程序

  1. 从主菜单中选择 文件 | 新建 | 项目 或点击 新建项目 按钮在 欢迎 屏幕。

  2. 在 新建项目 对话框中,在左侧窗格中选择 React。

  3. 在向导的右侧部分,指定项目名称和创建该项目的文件夹。

  4. 在 项目类型 区域,选择 Next.js。

    在 Node 解释器 字段中,指定要使用的 Node.js 解释器。 从列表中选择一个已配置的解释器或选择 添加 来配置一个新的解释器。

    从 create-next-app 列表中选择 npx create-next-app。

    或者,对于 5.1 及更早版本的 npm,请通过在 终端 Alt+F12 中运行 npm install --save-dev next react react-dom 手动安装 create-next-app 包。 创建应用程序时,请选择存储 create-next-app 包的文件夹。

  5. 可选:

    若要使用 TypeScript 而非 JavaScript,请选中 使用 TypeScript 模板 复选框。 IntelliJ IDEA 将为您的应用生成 .ts 文件以及一个 tsconfig.json 配置文件。

  6. 当您点击 创建 时,IntelliJ IDEA 会生成一个 Next.js 特定项目,其中包含所有必需的配置文件并下载所需的依赖项。 IntelliJ IDEA 还会创建一个 npm start 和 JavaScript Debug 配置,使用默认设置来运行或调试您的应用程序。

在空的 IntelliJ IDEA 项目中安装 Next.js

在这种情况下,您将不得不自己配置 build pipeline。 从 Next.js 官方网站了解更多关于将 Next.js 添加到项目中的信息。

创建一个空的 IntelliJ IDEA 项目

  1. 从主菜单中选择 文件 | 新建 | 项目 或点击 新建项目 按钮在 欢迎 屏幕。

  2. 在 新建项目 对话框中,在左侧窗格中选择 新建项目。

  3. 在右侧窗格中,选择 JavaScript 在 语言 区域。

  4. 如有必要,请为新项目命名并更改其位置,然后点击 创建。

在空项目中安装 Next.js

  1. 打开您将使用 Next.js的空项目。

  2. 在嵌入的 终端 (Alt+F12 )中输入:

    npm install --save-dev next react react-dom

从现有的 Next.js 应用程序开始

要继续开发现有的 Next.js 应用程序,请在 IntelliJ IDEA 中打开它并下载所需的依赖项。

打开您机器上已有的应用程序源码

  • 点击 打开 或 导入 屏幕上的 欢迎 或从主菜单中选择 文件 | 打开。 在打开的对话框中,选择存储源文件的文件夹。

从您的版本控制中检出应用源代码

  1. 点击 克隆仓库 在 欢迎 屏幕上。

    或者,从主菜单中选择 文件 | 新建 | 来自版本控制的项目…、 Git | 克隆… 或 VCS | 从版本控制获取。

    您可能会看到与您的项目相关联的其他版本控制系统,而不是在主菜单中的 Git。 例如, Mercurial 或 Perforce。

  2. 在打开的对话框中,从列表中选择您的版本控制系统,并指定要签出应用程序源代码的存储库。 如需更多信息,请参阅 查看项目 (克隆)。

下载依赖项

  • 点击 运行“npm install” 或 运行 'yarn install' 在弹出窗口中:

    打开应用程序并下载依赖项

    您可以使用 npm、 Yarn 1 或 Yarn 2 ,详情请参阅 npm 和 Yarn。

  • 或者,从编辑器中或 项目 工具窗口 Alt+1 的上下文菜单中选择 运行“npm install” 或 运行 'yarn install'。

项目安全性

当您打开一个在 IntelliJ IDEA 之外创建并导入其中的项目时,IntelliJ IDEA 会显示一个对话框,您可以在其中决定如何处理这个不熟悉的源代码项目。

请选择以下选项之一:

  • 安全模式预览 :在这种情况下,IntelliJ IDEA 以预览模式打开项目。 这意味着您可以浏览项目的源代码,但无法运行任务和脚本或运行/调试您的项目。

    IntelliJ IDEA 会在编辑器区域顶部显示通知,您可以随时点击 信任项目… 链接并加载您的项目。

  • 信任项目 :在这种情况下,IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化,项目的插件已解析,依赖项已添加,并且所有 IntelliJ IDEA 功能均可用。

  • 不要打开 :在这种情况下,IntelliJ IDEA 不会打开项目。

了解更多 项目安全性。

运行和调试 Next.js 应用程序

请参阅 运行一个 React 应用程序和 调试一个 React 应用程序。

最后修改日期: 2025年 4月 24日