# Next.js > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt). > **TL;DR** > 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。 > > > > 所需插件 : > > > > `JavaScript 和 TypeScript` , `Next.js`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。 IntelliJ IDEA 与 [Next.js](https://nextjs.org/) React 框架集成。 ## 开始之前 Procedure: 1. 下载并安装 [Node.js](http://nodejs.org/#download)。 2. 请确保 JavaScript 和 TypeScript 和 Next.js 所需的插件已在 设置 | 插件 页面上启用。 有关更多信息，请参阅 [管理插件](managing-plugins.html)。 ## 创建新的 Next.js 应用程序 推荐开始构建新的 Next.js 应用程序的方法是 `create-next-app` 包，该包使用 [npx](https://www.npmjs.com/package/npx) 为您IntelliJ IDEA下载和运行。 因此，您的开发环境已预配置为使用 Next.js。 当然，您仍然可以自行下载 `create-next-app` 或者创建一个空的 IntelliJ IDEA 项目并在其中安装 Next.js。 > **Tip:** > 了解更多有关如何通过 [Next.js 官方网站](https://nextjs.org/docs/getting-started)开始使用 Next.js。 ### 使用 create-next-app 生成 Next.js 应用程序 Procedure: 1. 从主菜单中选择 `文件 | 新建 | 项目` ，或者在 %instance% 主页 屏幕上点击 `新建 | 项目` 。 2. 在 新建项目 对话框的左侧窗格中，选择 React 。 3. 在向导的右侧部分，指定项目名称和创建该项目的文件夹。 4. 在 项目类型 区域，选择 Next.js 。 在 Node.js 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择 添加 以配置新的运行时。 从 create-next-app 列表中选择 npx create-next-app 。 或者，对于 npm 版本 5.1 及更早版本，请在 终端 `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中运行 `npm install --save-dev next react react-dom` ，自行安装 `create-next-app` 包。 创建应用程序时，选择存储 `create-next-app` 包的文件夹。 5. 可选： 若要使用 TypeScript 而非 JavaScript，请选中 使用 TypeScript 模板 复选框。 IntelliJ IDEA 将为您的应用生成 `.ts` 文件以及一个 `tsconfig.json` 配置文件。 6. 当您点击 创建 时，IntelliJ IDEA 会生成一个 Next.js 特定项目，其中包含所有必需的配置文件并下载所需的依赖项。 IntelliJ IDEA 还会创建一个 npm start 和一个 JavaScript Debug 配置，采用默认设置来运行或调试您的应用程序。 > **Tip:** > 或者，打开内置的 终端 并输入： > > > > 1. > > `npx create-next-app ` 以创建应用程序。 > > > > 2. `cd ` 切换到应用程序文件夹。 > > 3. `npm start` 以启动 Node.js 服务器。 ### 在空的 IntelliJ IDEA 项目中安装 Next.js 在这种情况下，需要自行配置构建流水线。 从 [Next.js 官方网站](https://nextjs.org/docs/getting-started#manual-setup)了解更多关于将 Next.js 添加到项目中的信息。 Procedure: 创建一个空的 IntelliJ IDEA 项目 1. 从主菜单中选择 `文件 | 新建 | 项目` ，或在 欢迎 屏幕上点击 新建项目 按钮。 2. 在 新建项目 对话框的左侧窗格中，选择 新建项目 。 3. 在右侧窗格中，选择 JavaScript 在 语言 区域。 4. 为新项目设置名称，并在必要时更改其位置，然后点击 创建 。 Procedure: 在空项目中安装 Next.js 1. 打开您将使用 Next.js 的空项目。 2. 在命令行 shell 或嵌入式 终端 （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入： `npm install --save-dev next react react-dom` ## 从现有的 Next.js 应用程序开始 要继续开发现有的 Next.js 应用程序，请在 IntelliJ IDEA 中打开它并下载所需的依赖项。 Procedure: 打开本机上已有的应用程序源代码 * 点击 打开或导入 屏幕上的 欢迎 或从主菜单中选择 `文件 | 打开` 。 在打开的对话框中，选择存储源文件的文件夹。 Procedure: 从版本控制系统检出应用程序源代码 1. 在 欢迎 屏幕上点击 克隆存储库 。 或者，从主菜单中选择 `文件 | 新建 | 从版本控制创建项目…` 、 `Git | 克隆…` 或 `VCS | 从版本控制获取` 。 在主菜单中，可能会看到与项目关联的其他任何版本控制系统，而不是 Git 。 例如， Mercurial 或 Perforce 。 2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。 Procedure: 下载依赖项 * 在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install' ： ![打开应用程序并下载依赖项](https://resources.jetbrains.com/help/img/idea/2026.3/ws_npm_yarn_package_run_npm_install_next_js.png) 您可以使用 [npm](https://docs.npmjs.com/)、 [Yarn 1](https://classic.yarnpkg.com/lang/en/) 或 [Yarn 2](https://yarnpkg.com/)，详情请参阅 [npm 和 Yarn](installing-and-removing-external-software-using-node-package-manager.html)。 * 或者，在编辑器中或在 项目 工具窗口（ `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Ctrl+1` (NetBeans), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))）中，从 `package.json` 的上下文菜单中选择 运行 'npm install' 或 运行 'yarn install' 。 ### 项目安全 打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，可在其中决定如何处理此包含不熟悉源代码的项目。 请选择以下选项之一： * 在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试项目。 IntelliJ IDEA 会在编辑器区域顶部显示一条通知，可以点击 信任项目… 链接随时加载项目。 * 信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能都可用。 * 不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。 有关更多信息，请参阅 [项目安全](project-security.html)。 > **Tip:** > 从欢迎屏幕或通过 `文件 | 新建 | 项目` 创建的项目会被自动视为受信任。 ## 运行 Next.js 应用程序 明确? wait no period? need no question. Actually final text should just string. Let's output clean. 要运行应用程序，需要将 `next dev` 命令作为脚本启动，然后在 运行 工具窗口或 终端 中点击应用程序 URL。 可以从 `package.json` 、在 终端 中将 `next dev` 命令作为脚本启动，如 [从编辑器运行应用程序](#ws_next_run_via_script) 中所述，或 [通过运行/调试配置](#next_run_run_via_rc)启动。 ### 从编辑器运行应用程序 Procedure: 1. 点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)（位于 `dev` 脚本旁的装订区域，该脚本在 `package.json` 中），或者执行 `next dev` 命令（在 终端 `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中），或者双击 `dev` 任务（在 [npm 工具窗口](npm-tool-window.html)（ `查看 | 工具窗口 | npm` ）中）。 ![从 package.json 运行 next dev](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_script.png) 2. 等待应用程序编译完成且开发服务器就绪。 运行 工具窗口或 终端 会显示应用程序正在运行的 URL，默认 URL 为 `http://localhost:3000` 。 ![带有应用链接的运行工具窗口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_script_run_tw_link.png) 点击此链接以在浏览器中打开应用程序。 ### 使用运行/调试配置运行应用程序 打开单仓库项目时，如果根 `package.json` 中将 `next` 软件包列为依赖项，IntelliJ IDEA 会自动生成一个 Next.js: server-side 运行/调试配置，类型为 [npm](run-debug-configuration-npm.html)。 该配置会执行 `next dev` 命令，该命令会启动开发服务器并在开发模式下运行应用程序。 > **Note:** > * 对于 monorepo 项目，必须手动创建此运行/调试配置。 > > * 对于通过 [New Project 向导](#creating_next_js_app_with_create_next_app) 生成的项目，重新打开项目时会生成运行/调试配置。 > > * 如果移除自动生成的运行/调试配置，它不会自动重新创建。 Procedure: 1. 从工具栏上的 运行 小部件列表中，选择一种 npm 类型的运行配置。 这可以是自动生成的 Next.js: 服务器端 配置，也可以是自己创建的自定义配置 [（如下所述）](#next_running_and_debugging_run_via_rc_create_rc)。 ![通过运行/调试配置在开发模式下运行 Next.js 应用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_dev_mode.png) 点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)。 2. 当应用程序编译完成且开发服务器准备就绪后， 运行 工具窗口或 终端 会显示应用程序正在运行的 URL。 默认 URL 为 `http://localhost:3000` ，但如果默认端口 `3000` 已被占用，服务器会尝试在最接近的可用端口上启动。 ![带有应用链接的运行工具窗口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_script_run_tw_link.png) 点击链接以在浏览器中打开应用程序。 ## 调试 Next.js 应用程序的客户端 使用 IntelliJ IDEA，可以通过两种方式开始调试会话： * [从编辑器](#ws_next_run_and_debug_via_script) - 从 `package.json` 或在 终端 中将 `next dev` 命令作为脚本运行。 然后在 运行 工具窗口或 终端 中点击应用程序 URL，开始调试会话。 * [使用运行/调试配置](#next_running_and_debugging_run_via_rc)。 ### 从编辑器开始调试 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_and_debug.mp4) Procedure: 使用 next dev 运行应用程序 1. 点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)（位于 `dev` 脚本旁的装订区域，该脚本在 `package.json` 中），或者执行 `next dev` 命令（在 终端 `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中），或者双击 `dev` 任务（在 [npm 工具窗口](npm-tool-window.html)（ `查看 | 工具窗口 | npm` ）中）。 ![从 package.json 运行 next dev](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_script.png) 2. 等待应用程序编译完成且开发服务器就绪。 运行 工具窗口或 终端 会显示应用程序正在运行的 URL，默认 URL 为 `http://localhost:3000` 。 ![带有应用链接的运行工具窗口](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_script_run_tw_link.png) 点击此链接以在浏览器中打开应用程序。 Procedure: 从运行工具窗口或终端开始调试会话 1. [设置断点](using-breakpoints.html#set-breakpoints)（如有必要）。 2. 点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)（位于 `dev` 脚本旁的装订区域，该脚本在 `package.json` 中），或者执行 `next dev` 命令（在 终端 `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)) 中），或者双击 `dev` 任务（在 [npm 工具窗口](npm-tool-window.html)（ `查看 | 工具窗口 | npm` ）中）。 3. 当应用程序编译完成且开发服务器准备就绪后， 运行 工具窗口或 终端 会显示应用程序正在运行的 URL。 默认 URL 为 `http://localhost:3000` ，但如果默认端口 `3000` 已被占用，服务器会尝试在最接近的可用端口上启动。 ![从运行工具窗口开始调试会话](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_debug_from_run_tw.png) 按住 `Ctrl+Shift` (Windows), `Ctrl+Shift` (macOS), `Ctrl+Shift` (IntelliJ IDEA Classic (macOS)), `Ctrl+Shift` (macOS System Shortcuts), `Ctrl+Shift` (XWin), `Ctrl+Shift` (GNOME), `Ctrl+Shift` (KDE), `Ctrl+Shift` (Emacs), `Ctrl+Shift` (Sublime Text), `Ctrl+Shift` (Sublime Text (macOS)), `Ctrl+Shift` (Visual Studio), `Ctrl+Shift` (Visual Studio (macOS)), `Ctrl+Shift` (NetBeans), `Ctrl+Shift` (Eclipse), `Ctrl+Shift` (Eclipse (macOS)) 并点击该链接。 4. 当应用程序在浏览器中打开时，执行会触发程序执行的操作，例如点击链接。 焦点会切换到 IntelliJ IDEA，并打开 [调试工具窗口](debug-tool-window.html)。 ![调试会话已开始](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_debug_from_run_tw_debug_session.png) 按常规进行： [逐步执行程序](stepping-through-the-program.html)、 [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行、 [在暂停时进行检查](examining-suspended-program.html)、查看调用堆栈和变量、设置监视、评估变量、 [查看实际 HTML DOM](viewing-actual-html-dom.html)，等等。 要忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。 ### 通过运行/调试配置开始调试 打开单仓库项目时，如果根 `package.json` 中将 `next` 软件包列为依赖项，IntelliJ IDEA 会自动生成两个运行/调试配置： * Next.js: server-side ，类型为 [npm](run-debug-configuration-npm.html)。 该配置会执行 `next dev` 命令，该命令会启动开发服务器并在开发模式下运行应用程序。 * Next.js: debug client-side ，类型为 [JavaScript Debug](run-debug-configuration-javascript-debug.html)，用于在浏览器中调试应用程序。 ![已生成两个运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_and_debug_two_rc_generated.png) > **Note:** > * 对于 monorepo 项目，必须手动创建这些运行/调试配置。 > > * 对于通过 [New Project 向导](#creating_next_js_app_with_create_next_app) 生成的项目，重新打开项目时会生成运行/调试配置。 > > * 如果移除自动生成的运行/调试配置，它不会自动重新创建。 Procedure: 创建运行/调试配置 1. 前往 `运行 | 编辑配置` 。 或者，在工具栏上的 运行 小部件中选择 编辑配置 。 ![打开编辑配置对话框](https://resources.jetbrains.com/help/img/idea/2026.3/next_run_config_create.png) 在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（ !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)），然后从列表中选择 npm 。 2. 在打开的 配置 对话框的 运行/调试配置：npm 选项卡中，指定 `package.json` 、Node.js 运行时以及要使用的包管理器的位置。 在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 它很可能是默认的 `dev` 脚本，但可以在 `package.json` 中配置另一个脚本，例如，在自定义端口上运行应用程序。 ![npm 运行/调试配置](https://resources.jetbrains.com/help/img/idea/2026.3/next_debug_npm_rc.png) 3. 可选： 要在浏览器中打开应用程序，请按照以下步骤更新配置：在 浏览器 / Live Edit 选项卡中，选中 在启动后 复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。 ![Browser / Live Edit 选项卡：选择浏览器](https://resources.jetbrains.com/help/img/idea/2026.3/next_run_rc_browser_tab_select_browser.png) > **Note:** > 如果要调试应用程序，请选择 [Google Chrome](http://www.google.com/chrome/) 或其他 [基于 Chromium 的浏览器](https://www.chromium.org/)。 Procedure: 使用 npm 运行/调试配置在开发模式下运行应用程序 1. 从工具栏上的 运行 小部件列表中，选择一种 npm 类型的运行配置。 这可以是自动生成的 Next.js: 服务器端 配置，或者是您自行创建的自定义配置 [如上所述](#next_running_and_debugging_run_via_rc_create_rc)。 ![通过运行/调试配置在开发模式下运行 Next.js 应用](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_dev_mode.png) 点击 ![运行图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.run.svg)。 2. 当应用程序编译完成且开发服务器准备就绪后， 运行 工具窗口或 终端 会显示应用程序正在运行的 URL。 默认 URL 为 `http://localhost:3000` ，但如果默认端口 `3000` 已被占用，服务器会尝试在最接近的可用端口上启动。 ![正在开发模式下运行 Next.js 应用：开发服务器已准备就绪](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_run_with_rc_run_tw.png) 点击此链接查看应用程序。 或者，启用 IntelliJ IDEA 以在启动时打开应用程序 [如上所述](#ws_next_start_app_in_dev_mode_enable_opening_browser)。 > **Note:** > 当开发服务器正在运行时，您的应用程序会在您更改任意源文件并保存更新后自动重新加载。 Procedure: 使用 JavaScript Debug 配置开始调试 1. [设置断点](using-breakpoints.html#set-breakpoints)（如有必要）。 2. 在开发模式下运行应用程序， [使用 npm 运行/调试配置](#next_running_and_debugging_run_via_rc_steps)或 [使用 next dev](#ws_next_run_and_debug_via_script)。 3. 当应用程序编译完成且开发服务器准备就绪后， 运行 工具窗口或 终端 会显示应用程序正在运行的 URL。 默认 URL 为 `http://localhost:3000` ，但如果默认端口 `3000` 已被占用，服务器会尝试在最接近的可用端口上启动。 > **Note:** > 请确保在 JavaScript Debug 配置中指定实际端口。 4. 从工具栏上的 运行 小部件列表中，选择一种 JavaScript Debug 类型的运行配置。 这可以是自动生成的 Next.js: 调试客户端 配置，或者是您自行创建的自定义配置 [如上所述](#next_running_and_debugging_run_via_rc_create_rc)。 ![开始调试会话 — 选择 JavaScript Debug 运行配置](https://resources.jetbrains.com/help/img/idea/2026.3/next_debug_with_rc.png) 点击 ![调试图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.debug.svg)。 5. 当应用程序在浏览器中打开时，执行会触发程序执行的操作，例如点击链接。 焦点会切换到 IntelliJ IDEA，并打开 [调试工具窗口](debug-tool-window.html)。 按常规进行： [逐步执行程序](stepping-through-the-program.html)、 [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行、 [在暂停时进行检查](examining-suspended-program.html)、查看调用堆栈和变量、设置监视、评估变量、 [查看实际 HTML DOM](viewing-actual-html-dom.html)，等等。 要忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。 请参阅 [运行一个 React 应用程序](run-and-debug-react-applications.html#react_running_and_debugging_run)和 [调试一个 React 应用程序](run-and-debug-react-applications.html#react_running_and_debugging_debug)。 ## 调试 Next.js 应用程序的服务器端组件 [Video](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_debug_server.mp4) 打开单仓库项目时，如果根 `package.json` 中将 `next` 软件包列为依赖项，IntelliJ IDEA 会自动生成一个 Next.js: server-side 运行/调试配置，类型为 [npm](run-debug-configuration-npm.html)。 该配置会执行 `next dev` 命令，该命令会启动开发服务器并在开发模式下运行应用程序。 > **Note:** > * 对于 monorepo 项目，必须手动创建此运行/调试配置。 > > * 对于通过 [New Project 向导](#creating_next_js_app_with_create_next_app) 生成的项目，重新打开项目时会生成运行/调试配置。 > > * 如果移除自动生成的运行/调试配置，它不会自动重新创建。 Procedure: 1. 在服务器端代码中根据需要设置断点。 2. 从工具栏上的 运行 小部件列表中，选择一种 npm 类型的运行配置。 这可以是自动生成的 Next.js: 服务器端 配置，或者是您自行创建的自定义配置 [如上所述](#next_running_and_debugging_run_via_rc_create_rc)。 ![通过运行/调试配置开始调试 Next.js 应用的服务器端代码](https://resources.jetbrains.com/help/img/idea/2026.3/ws_next_debug_server_side_start_app_in_dev_mode_rc.png) 点击 ![调试图标](https://resources.jetbrains.com/help/img/idea/2026.3/app-client.expui.run.debug.svg)。 3. 执行会触发程序执行的操作，例如点击链接。 焦点会切换到 IntelliJ IDEA，并打开 [调试工具窗口](debug-tool-window.html)。 按常规进行： [逐步执行程序](stepping-through-the-program.html)、 [停止并恢复](starting-the-debugger-session.html#pause-resume)程序执行、 [在暂停时进行检查](examining-suspended-program.html)、查看调用堆栈和变量、设置监视、评估变量、 [查看实际 HTML DOM](viewing-actual-html-dom.html)，等等。 要忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏上点击 ![禁用源代码映射切换按钮​](https://resources.jetbrains.com/help/img/idea/2026.3/sourceMapDisable.png)。