PyCharm 2025.1 Help

Next.js

PyCharm 与 Next.js React 框架集成。

开始之前

  1. 请确保您的计算机上安装了 Node.js

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

创建新的 Next.js 应用程序

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

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

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

  1. 点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 文件 | 新建 | 项目新建 项目 对话框打开。

  2. 在左侧窗格中,选择 Next.js

  3. 在右侧窗格中:

    1. 指定存储项目相关文件的文件夹路径。

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

    3. 请从 create-next-app 列表中选择 npx create-next-app

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

    4. 可选:

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

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

在一个空的 PyCharm 项目中安装 Next.js

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

创建一个空的 PyCharm 项目

  1. 点击 创建新项目 屏幕上的 欢迎 或从主菜单中选择 文件 | 新建 | 项目新建 项目 对话框打开。

  2. 在左侧窗格中选择 空项目。 在右侧窗格中,指定应用程序文件夹,然后点击 创建

在空项目中安装 Next.js

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

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

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

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

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

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

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

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

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

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

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

  2. 在打开的对话框中,从列表中选择您的版本控制系统,并指定要从中检出的应用程序源代码的存储库。 如需了解更多信息,请参见 Check out a project (clone)

下载依赖项

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

    打开应用并下载依赖项

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

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

项目安全性

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

不受信任的项目警告

请选择以下选项之一:

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

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

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

  • 请勿打开 :在这种情况下,PyCharm 不会打开项目。

请从 项目安全 了解更多。

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

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

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