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 的空项目。
在内置的 终端 （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 ，等等。