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