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