Next.js
最后修改时间：2023 年 9 月 8 日PyCharm 与Next.js React 框架集成。
在你开始之前
创建一个新的 Next.js 应用程序
开始构建新的 Next.js 应用程序的推荐方法是使用包，PyCharm 使用npxcreate-next-app下载并运行该包。因此，您的开发环境已预先配置为使用 Next.js。
当然，您仍然可以create-next-app自行下载或创建一个空的 PyCharm 项目并在其中安装 Next.js。
提示
从Next.js 官方网站了解有关开始使用 Next.js 的更多信息。
使用 create-next-app 生成 Next.js 应用程序
单击欢迎屏幕上的创建新项目或选择 文件| 新 | 从主菜单进行项目。“新建项目”对话框打开。
在左侧窗格中，选择Next.js。
在右侧窗格中：
指定将存储项目相关文件的文件夹的路径。
在“节点解释器”字段中，指定要使用的 Node.js 解释器。从列表中选择已配置的解释器，或选择“添加”以配置新的解释器。
从create-next-app列表中，选择npx create-next-app。
或者，对于 npm 版本 5.1 及更早版本，您可以
create-next-app通过npm install --save-dev next react react-dom在Terminal 中运行来自行安装软件包。创建应用程序时，选择存储包的文件夹。AltF12create-next-app可选：
要使用 TypeScript 而不是 JavaScript，请选中“使用 TypeScript 模板”复选框。PyCharm 将为您的应用程序生成.ts文件和tsconfig.json 配置文件。
当您单击Create时，PyCharm 会生成一个Next.js特定项目，其中包含所有必需的配置文件并下载所需的依赖项。PyCharm 还使用默认设置创建npm start和JavaScript 调试配置，用于运行或调试应用程序。
提示
或者，打开内置终端并输入：
npx create-next-app <application-name>创建一个应用程序。
cd <application-name>切换到应用程序文件夹。
npm start启动 Node.js 服务器。
在空的 PyCharm 项目中安装 Next.js
在这种情况下，您必须自己配置构建管道。从Next.js 官方网站了解有关将 Next.js 添加到项目的更多信息。
创建一个空的 PyCharm 项目
单击欢迎屏幕上的创建新项目或选择 文件| 新 | 从主菜单进行项目。“新建项目”对话框打开。
在左侧窗格中，选择“空项目”。在右侧窗格中，指定应用程序文件夹并单击“创建”。
在空项目中安装 Next.js
打开将在其中使用Next.js 的空项目。
在嵌入式终端( ) 中，键入：AltF12
npm install --save-dev next react react-dom
从现有的 Next.js 应用程序开始
要继续开发现有的 Next.js 应用程序，请在 PyCharm 中打开它并下载所需的依赖项。
打开计算机上已有的应用程序源
单击欢迎屏幕上的“打开”或选择“文件”|“ 从主菜单打开。在打开的对话框中，选择存储源的文件夹。
从版本控制中检查应用程序源
单击欢迎屏幕上的从 VCS 获取。
或者，选择文件 | 新 | 来自版本控制或Git 的项目| 从主菜单克隆...。
您可能会看到与您的项目关联的任何其他版本控制系统，而不是主菜单中的Git 。例如，Mercurial或Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定用于检查应用程序源的存储库。有关更多信息，请参阅查看项目（克隆）。
下载依赖项
在弹出窗口中单击运行“npm install”或运行“yarn install” ：
您可以使用npm、Yarn 1或Yarn 2 ，详细信息请参阅npm 和 Yarn 。
或者，从编辑器或项目工具窗口中package.json的上下文菜单中选择运行“npm install”或运行“yarn install”。
项目安全
当您打开在 PyCharm 外部创建并导入其中的项目时，PyCharm 会显示一个对话框，您可以在其中决定如何使用不熟悉的源代码处理该项目。
选择以下选项之一：
在安全模式下预览：在这种情况下，PyCharm 以预览模式打开项目。这意味着您可以浏览项目的源代码，但无法运行任务和脚本或运行/调试项目。
PyCharm 在编辑器区域顶部显示一条通知，您可以单击“信任项目...”链接并随时加载您的项目。
信任项目：在这种情况下，PyCharm 打开并加载一个项目。这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 PyCharm 功能均可用。
不要打开：在这种情况下，PyCharm 不会打开项目。
从项目安全中了解更多信息。
提示
从欢迎屏幕或通过文件 |创建的项目 新 | 中描述的项目将自动被视为可信。
运行和调试 Next.js 应用程序
请参阅运行和调试 React 应用程序。
感谢您的反馈意见！