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 startJavaScript 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。 例如, MercurialPerforce

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

下载依赖项

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

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

    您可以使用 npmYarn 1Yarn 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日