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