Next.js
PyCharm 集成了 Next.js React 框架。
在开始之前
创建新的 Next.js 应用程序
开始构建新的 Next.js 应用程序的推荐方式是使用 create-next-app 包，PyCharm 将使用 npx 为您下载并运行该包。 这样，您的开发环境将预配置为使用 Next.js。
当然，您仍然可以自行下载 create-next-app ，或创建一个空的 PyCharm 项目并在其中安装 Next.js。
使用 create-next-app 生成 Next.js 应用程序
在 欢迎屏幕 屏幕上点击 新建项目 ，或从主菜单中选择 。 新建 项目 对话框 打开。
在左侧窗格，选择 Next.js。
在右侧窗格中：
指定用于存储与项目相关文件的文件夹路径。
在 Node 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择已配置的运行时，或选择 添加 来配置新的运行时。
从 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包的文件夹。可选：
要使用 TypeScript 而非 JavaScript，请选中 使用 TypeScript 模板 复选框。 PyCharm 将为您的应用程序生成 .ts 文件以及一个 tsconfig.json 配置文件。
当您点击 创建 时，PyCharm 会生成一个特定于 Next.js 的项目，其中包含所有必需的配置文件，并下载所需的依赖项。 PyCharm 还会创建 npm start 和 JavaScript Debug 配置，使用默认设置来运行或调试您的应用程序。
在空的 PyCharm 项目中安装 Next.js
在这种情况下，您需要自行配置构建流水线。 有关将 Next.js 添加到项目的更多信息，请参阅 Next.js 官方网站。
创建空白 PyCharm 项目
在 欢迎屏幕 屏幕上点击 新建项目 ，或从主菜单中选择 。 新建 项目 对话框 打开。
在左侧窗格，选择 空项目。 在右侧窗格，指定应用程序文件夹并点击 创建。
在空项目中安装 Next.js
打开将使用 Next.js 的空项目。
在命令行 shell 或嵌入式 终端 （Alt+F12 ）中输入：
npm install --save-dev next react react-dom
从现有的 Next.js 应用程序开始
要继续开发现有的 Next.js 应用程序，请在 PyCharm 中将其打开并下载所需依赖项。
打开您计算机上已有的应用源代码
在 欢迎屏幕 屏幕左侧窗格中点击 打开 ，或在主菜单中选择 。 在打开的对话框中，选择您的源代码所在的文件夹。
从您的版本控制系统中检出应用源代码
在 欢迎屏幕 屏幕左侧窗格中点击 克隆。
或者，从主菜单中选择 或 或 。
在主菜单中，您可能会看到与项目关联的其他任何版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出的应用源代码的存储库。 欲了解详细信息，请参阅 检出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详情请参阅 npm 和 Yarn。
或者，在编辑器或 项目 工具窗口 (Alt+1) 中，从 package.json 的上下文菜单选择 运行 'npm install' 或 运行 'yarn install'。
项目安全
当您打开在 PyCharm 之外创建并导入到其中的项目时，PyCharm 会显示一个对话框，您可以在其中决定如何处理包含不熟悉源代码的该项目。
选择以下选项之一：
在安全模式中预览 ：在这种情况下， PyCharm 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本，也不能运行/调试您的项目。
PyCharm 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接加载项目。
信任项目 ：在这种情况下， PyCharm 打开并加载项目。 这意味着项目已初始化、项目插件已解析、已添加依赖项，并且所有 PyCharm 功能均可用。
不打开 ：在这种情况下， PyCharm 不打开项目。
在 项目安全 了解更多信息。
运行 Next.js 应用程序
要运行您的应用程序，需要将 next dev 命令作为脚本启动，然后在 运行 工具窗口或 终端 中点击应用程序 URL。
您可以从 package.json 以脚本方式启动 next dev 命令，在 终端 中，或按照 从编辑器运行应用程序 中描述的方式启动，或 通过运行/调试配置启动。
从编辑器运行应用程序
在 package.json 中的
dev脚本旁的装订区域中点击
，或在 终端 Alt+F12 中执行 next dev命令，或在 npm 工具窗口 （ ）中双击dev任务。
等待应用程序编译完成并且开发服务器已就绪。
运行 工具窗口或 终端 显示您的应用程序运行的 URL，默认 URL 为 http://localhost:3000 。
点击此链接在浏览器中打开应用程序。
通过运行/调试配置运行应用程序
当您打开一个单存储库项目，且在根 package.json 中将 next 软件包列为依赖项时，PyCharm 会自动生成一个类型为 npm 的 Next.js: server-side 运行/调试配置。 该配置会执行 next dev 命令，启动开发服务器，并在开发模式下运行您的应用程序。
从工具栏上的 运行 小部件的列表中，选择一个类型为 npm 的运行配置。 这可以是自动生成的 Next.js：服务器端 配置，或者是您自己创建的自定义配置 如下面所述。
单击
。当应用程序编译完成并且开发服务器已就绪时， 运行 工具窗口或 终端 会显示您的应用程序正在运行的 URL。 默认 URL 为 http://localhost:3000 ，然而如果默认端口
3000已被占用，服务器会尝试在最接近的空闲端口上启动。点击该链接在浏览器中打开应用程序。
调试 Next.js 应用程序的客户端部分
在 PyCharm 中，您可以通过两种方式启动调试会话：
从编辑器启动调试
使用 next dev 运行应用程序
在 package.json 中的
dev脚本旁的装订区域中点击 ，或在 终端 Alt+F12 中执行 next dev命令，或在 npm 工具窗口 （ ）中双击dev任务。等待应用程序编译完成并且开发服务器已就绪。
运行 工具窗口或 终端 显示您的应用程序运行的 URL，默认 URL 为 http://localhost:3000 。
点击此链接在浏览器中打开应用程序。
从运行工具窗口或终端启动调试会话
设置断点 （根据需要）。
在 package.json 中的
dev脚本旁的装订区域中点击 ，或在 终端 Alt+F12 中执行 next dev命令，或在 npm 工具窗口 （ ）中双击dev任务。当应用程序编译完成并且开发服务器已就绪时， 运行 工具窗口或 终端 会显示您的应用程序正在运行的 URL。 默认 URL 为 http://localhost:3000 ，然而如果默认端口
3000已被占用，服务器会尝试在最接近的空闲端口上启动。
按住 Ctrl+Shift 并点击该链接。
当应用程序在浏览器中打开时，执行触发程序执行的操作，例如点击链接。 焦点切换到 PyCharm，并打开 调试工具窗口。
继续照常进行： 逐步执行程序、 停止并恢复程序执行、 在挂起时进行检查 、浏览调用堆栈和变量、设置监视、计算变量、 查看实际 HTML DOM ，等等。
要忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏中按
。
通过运行/调试配置启动调试
当您打开一个单存储库项目，且在根 package.json 中将 next 包列为依赖项时，PyCharm 会自动生成两个运行/调试配置：
Next.js：服务器端 ，类型为 npm。 该配置会执行
next dev命令，启动开发服务器，并在开发模式下运行您的应用程序。Next.js：客户端调试 ，类型为 JavaScript Debug ，用于在浏览器中调试您的应用程序。
创建运行/调试配置
转到 。 或者，在工具栏的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 npm。在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 的位置、要使用的 Node.js 运行时和包管理器。
在 Command 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 通常会使用默认的
dev脚本，但您可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用程序。
可选：
要在浏览器中打开应用程序，请按以下方式更新配置：在 浏览器/实时编辑 选项卡中，选择 启动后 复选框，选择用于打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。
使用 npm 运行/调试配置在开发模式下运行应用程序
使用 JavaScript Debug 配置开始调试
设置断点 （根据需要）。
运行您的应用程序在开发模式下 使用 npm 运行/调试配置 或 使用
next dev。当应用程序编译完成并且开发服务器已就绪时， 运行 工具窗口或 终端 会显示您的应用程序正在运行的 URL。 默认 URL 为 http://localhost:3000 ，然而如果默认端口
3000已被占用，服务器会尝试在最接近的空闲端口上启动。从工具栏上的 运行 小部件的列表中，选择一个类型为 JavaScript 调试 的运行配置。 这可以是自动生成的 Next.js：客户端调试 配置，或者是您自行创建的自定义配置 如上所述。
单击
。当应用程序在浏览器中打开时，执行触发程序执行的操作，例如点击链接。 焦点切换到 PyCharm，并打开 调试工具窗口。
继续照常进行： 逐步执行程序、 停止并恢复程序执行、 在挂起时进行检查 、浏览调用堆栈和变量、设置监视、计算变量、 查看实际 HTML DOM ，等等。
要忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏中按
。
请参阅 运行 React 应用程序 和 调试 React 应用程序。
调试 Next.js 应用程序的服务器端组件
当您打开一个单存储库项目，且在根 package.json 中将 next 软件包列为依赖项时，PyCharm 会自动生成一个类型为 npm 的 Next.js: server-side 运行/调试配置。 该配置会执行 next dev 命令，启动开发服务器，并在开发模式下运行您的应用程序。
在服务器端代码中根据需要设置断点。
从工具栏上的 运行 小部件的列表中，选择一个类型为 npm 的运行配置。 这可以是自动生成的 Next.js：服务器端 配置，或者是您自行创建的自定义配置 如上所述。
单击
。执行触发程序运行的操作，例如点击链接。 焦点切换到 PyCharm，并打开 调试工具窗口。
继续照常进行： 逐步执行程序、 停止并恢复程序执行、 在挂起时进行检查 、浏览调用堆栈和变量、设置监视、计算变量、 查看实际 HTML DOM ，等等。
要忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏中按
。