Nx 中的 Next.js Page 生成器用nx g page快速创建静态与动态页面【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nxnx g page是nx/next插件内置的页面生成器它基于 Nx 的 React 组件生成器为 Next.js 的 App Router 与 Pages Router 自动生成正确的目录结构和页面文件。本指南以 packages/next/docs/page-examples.md 为主线结合 page.ts 的源码实现与 page.spec.ts 的测试用例讲解如何用一条命令创建静态页面、动态路由页面以及如何通过--style、--withTests、--js等选项控制生成结果帮助你在 Nx 工作区中快速搭建 Next.js 页面。一、Page 生成器是什么在 Nx Next.js 工作区中page生成器由nx/next插件提供注册在 packages/next/generators.json 中page: { factory: ./dist/src/generators/page/page, schema: ./dist/src/generators/page/schema.json, description: Create a page. }从源码注释看该生成器本质上是对 Nx React 组件生成器的封装但针对 Next.js 做了三点增强见 page.ts自动把生成的文件放在pagesPages Router或appApp Router目录下额外处理 css / scss 样式依赖根据路由架构决定默认文件名App Router 下为page.tsxPages Router 下为index.tsx。由于它注册在插件集合中你在工作区任意位置都可以通过nx g page或nx generate page调用效果等价。二、创建静态页面在应用的apps/my-app/pages/my-page目录下生成一个名为MyPage的静态页面只需在项目根目录执行nx g page apps/my-app/pages/my-page这是 page 生成器最基础的用法path是唯一必填参数见 schema.json它表示页面生成的目标目录相对于当前工作目录。生成结果与你的 Next.js 路由架构相关详见第四节如果my-app使用的是 App Router会在apps/my-app/app/my-page/page.tsx生成页面如果使用的是 Pages Router则生成apps/my-app/pages/my-page/index.tsx。原文档给出的目标产物apps/my-app/pages/my-page/page.tsx对应的是将页面生成到apps/my-app/pages/my-page目录下、使用 App Router 约定的场景。你也可以直接给到应用根目录如nx g page apps/my-app生成器会通过determineArtifactNameAndDirectoryOptions自动解析出所属项目与目标路径见 page.ts。三、创建动态页面Next.js 的动态路由依赖文件名中的方括号段例如[id]。用 page 生成器创建动态页面时把动态段写在路径里即可注意用引号包裹以防止 Shell 展开nx g page apps/my-app/pages/products/[id]这条命令会在apps/my-app/pages/products/[id]目录下生成动态路由页面App Router 下产物为page.tsxPages Router 下为index.tsx之后访问/products/1、/products/2都会命中该页面可在组件中通过params读取id。动态路径中的方括号会被原样保留在目录名中这一点在测试用例中有明确验证pageGenerator以my-app/pages/posts/[dynamic]为 path 生成后断言my-app/pages/posts/[dynamic]/index.tsx真实存在见 page.spec.ts。四、App Router 与 Pages Router 的自动适配page 生成器会先探测目标项目使用的是哪种路由架构再决定生成文件的默认名字。判断逻辑在 page.ts// app/ is a reserved folder in nextjs so it is safe to check its existence const isAppRouter host.exists(${project.root}/app) || host.exists(${project.root}/src/app); const fileName options.fileName || (isAppRouter ? page : index);即只要项目根下存在app/或src/app/目录app是 Next.js 保留目录名就判定为 App Router默认文件名取page否则按 Pages Router 处理默认文件名取index。路由架构判定条件默认文件名静态页示例产物App Router存在app/或src/app/page.tsxapps/my-app/app/about/page.tsxPages Router不存在上述目录index.tsxmy-app/pages/hello/index.tsx对应行为在 page.spec.ts 中成对覆盖Pages Router 用例断言生成index.tsx与index.module.cssL28-L37App Router 用例断言生成page.tsx与page.module.cssL68-L81。如果你不想使用默认文件名可以显式传入--fileName覆盖测试见 L54-L64 与 L104-L118。五、完整参数说明page 生成器的全部选项定义在 schema.json 中类型定义见 schema.d.ts参数类型默认值别名说明pathstring必填位置参数页面生成的目标目录相对当前工作目录namestring目录名—页面符号名不传时取 path 最后一段无法推断时报错见 page.tsstylecss|scss|nonecss-s样式文件扩展名交互式运行时还会弹出选择列表fileNamestringpage/index—生成的文件名不含扩展名覆盖默认值withTestsbooleanfalse—为true时同时生成spec测试文件exportbooleanfalse-e为true时把组件从项目index.ts导出page 生成器内部强制为falsejsbooleanfalse—生成 JavaScript.jsx而非 TypeScript.tsxskipFormatbooleanfalse—跳过生成后的格式化典型组合用法# 生成带 SCSS 样式文件的页面 nx g page apps/my-app/pages/about --stylescss # 生成纯 TSX、不带样式文件的页面 nx g page apps/my-app/pages/plain --stylenone # 生成页面并附带测试文件 nx g page apps/my-app/pages/contact --withTests # 生成 JavaScript 版本页面 nx g page apps/my-app/pages/legacy --js六、生成的文件结构以默认 CSS 样式为例生成的页面目录结构如下apps/my-app/pages/my-page/ ├── page.tsx # 页面组件App Router ├── page.module.css # CSS Module 样式文件 └── page.spec.tsx # 仅当 --withTests 时生成页面组件的模板见 app/page.tsx__tmpl__生成出的代码本质是一个默认导出的 React 函数组件并引入同级的 CSS Moduleimport styles from ./page.module.css; export default function Index() { return div className{styles.page}.../div; }样式文件的扩展名由--style决定css生成page.module.cssscss生成page.module.scssnone则不生成样式文件且不引入任何样式导入。七、底层实现原理page生成器的执行流程见 page.ts版本校验调用assertSupportedNextVersion确认当前工作区 Next.js 版本受支持参数规范化normalizeOptions解析项目归属、推断页面名、确定默认文件名委托给 React 生成器以isNextPage: true、export: false、classComponent: false、routing: false、skipTests: !options.withTests调用nx/react的componentGenerator生成 TSX 组件与测试文件安装样式依赖根据--style通过addStyleDependencies为项目补充 sass 等依赖swc 判定见 page.ts格式化除非--skipFormat否则对生成文件执行格式化返回任务runTasksInSerial依次执行组件安装与样式安装任务。与component生成器见 component.ts的区别在于page强制要求文件落在页面路由目录中、默认关闭导出并且文件名随路由架构自适应component则用于生成可复用的普通 React 组件。八、实战小结在 Nx 管理的 Next.js 应用中创建页面只需记住两个核心场景# 静态页面 nx g page apps/my-app/pages/my-page # 动态页面方括号段必须用引号包裹 nx g page apps/my-app/pages/products/[id]其余行为由生成器自动完成路由架构探测、目录创建、样式依赖安装、可选测试文件与代码格式化。想要更深入理解生成逻辑可以直接阅读 page.ts 与 page.spec.ts想查看page生成器如何被插件注册见 generators.json。【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/12 17:25:04 · 阅读 1.2k Nx 中的 Next.js Page 生成器：用 `nx g page` 快速创建静态与动态页面
Nx 中的 Next.js Page 生成器用nx g page快速创建静态与动态页面【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nxnx g page是nx/next插件内置的页面生成器它基于 Nx 的 React 组件生成器为 Next.js 的 App Router 与 Pages Router 自动生成正确的目录结构和页面文件。本指南以 packages/next/docs/page-examples.md 为主线结合 page.ts 的源码实现与 page.spec.ts 的测试用例讲解如何用一条命令创建静态页面、动态路由页面以及如何通过--style、--withTests、--js等选项控制生成结果帮助你在 Nx 工作区中快速搭建 Next.js 页面。一、Page 生成器是什么在 Nx Next.js 工作区中page生成器由nx/next插件提供注册在 packages/next/generators.json 中page: { factory: ./dist/src/generators/page/page, schema: ./dist/src/generators/page/schema.json, description: Create a page. }从源码注释看该生成器本质上是对 Nx React 组件生成器的封装但针对 Next.js 做了三点增强见 page.ts自动把生成的文件放在pagesPages Router或appApp Router目录下额外处理 css / scss 样式依赖根据路由架构决定默认文件名App Router 下为page.tsxPages Router 下为index.tsx。由于它注册在插件集合中你在工作区任意位置都可以通过nx g page或nx generate page调用效果等价。二、创建静态页面在应用的apps/my-app/pages/my-page目录下生成一个名为MyPage的静态页面只需在项目根目录执行nx g page apps/my-app/pages/my-page这是 page 生成器最基础的用法path是唯一必填参数见 schema.json它表示页面生成的目标目录相对于当前工作目录。生成结果与你的 Next.js 路由架构相关详见第四节如果my-app使用的是 App Router会在apps/my-app/app/my-page/page.tsx生成页面如果使用的是 Pages Router则生成apps/my-app/pages/my-page/index.tsx。原文档给出的目标产物apps/my-app/pages/my-page/page.tsx对应的是将页面生成到apps/my-app/pages/my-page目录下、使用 App Router 约定的场景。你也可以直接给到应用根目录如nx g page apps/my-app生成器会通过determineArtifactNameAndDirectoryOptions自动解析出所属项目与目标路径见 page.ts。三、创建动态页面Next.js 的动态路由依赖文件名中的方括号段例如[id]。用 page 生成器创建动态页面时把动态段写在路径里即可注意用引号包裹以防止 Shell 展开nx g page apps/my-app/pages/products/[id]这条命令会在apps/my-app/pages/products/[id]目录下生成动态路由页面App Router 下产物为page.tsxPages Router 下为index.tsx之后访问/products/1、/products/2都会命中该页面可在组件中通过params读取id。动态路径中的方括号会被原样保留在目录名中这一点在测试用例中有明确验证pageGenerator以my-app/pages/posts/[dynamic]为 path 生成后断言my-app/pages/posts/[dynamic]/index.tsx真实存在见 page.spec.ts。四、App Router 与 Pages Router 的自动适配page 生成器会先探测目标项目使用的是哪种路由架构再决定生成文件的默认名字。判断逻辑在 page.ts// app/ is a reserved folder in nextjs so it is safe to check its existence const isAppRouter host.exists(${project.root}/app) || host.exists(${project.root}/src/app); const fileName options.fileName || (isAppRouter ? page : index);即只要项目根下存在app/或src/app/目录app是 Next.js 保留目录名就判定为 App Router默认文件名取page否则按 Pages Router 处理默认文件名取index。路由架构判定条件默认文件名静态页示例产物App Router存在app/或src/app/page.tsxapps/my-app/app/about/page.tsxPages Router不存在上述目录index.tsxmy-app/pages/hello/index.tsx对应行为在 page.spec.ts 中成对覆盖Pages Router 用例断言生成index.tsx与index.module.cssL28-L37App Router 用例断言生成page.tsx与page.module.cssL68-L81。如果你不想使用默认文件名可以显式传入--fileName覆盖测试见 L54-L64 与 L104-L118。五、完整参数说明page 生成器的全部选项定义在 schema.json 中类型定义见 schema.d.ts参数类型默认值别名说明pathstring必填位置参数页面生成的目标目录相对当前工作目录namestring目录名—页面符号名不传时取 path 最后一段无法推断时报错见 page.tsstylecss|scss|nonecss-s样式文件扩展名交互式运行时还会弹出选择列表fileNamestringpage/index—生成的文件名不含扩展名覆盖默认值withTestsbooleanfalse—为true时同时生成spec测试文件exportbooleanfalse-e为true时把组件从项目index.ts导出page 生成器内部强制为falsejsbooleanfalse—生成 JavaScript.jsx而非 TypeScript.tsxskipFormatbooleanfalse—跳过生成后的格式化典型组合用法# 生成带 SCSS 样式文件的页面 nx g page apps/my-app/pages/about --stylescss # 生成纯 TSX、不带样式文件的页面 nx g page apps/my-app/pages/plain --stylenone # 生成页面并附带测试文件 nx g page apps/my-app/pages/contact --withTests # 生成 JavaScript 版本页面 nx g page apps/my-app/pages/legacy --js六、生成的文件结构以默认 CSS 样式为例生成的页面目录结构如下apps/my-app/pages/my-page/ ├── page.tsx # 页面组件App Router ├── page.module.css # CSS Module 样式文件 └── page.spec.tsx # 仅当 --withTests 时生成页面组件的模板见 app/page.tsx__tmpl__生成出的代码本质是一个默认导出的 React 函数组件并引入同级的 CSS Moduleimport styles from ./page.module.css; export default function Index() { return div className{styles.page}.../div; }样式文件的扩展名由--style决定css生成page.module.cssscss生成page.module.scssnone则不生成样式文件且不引入任何样式导入。七、底层实现原理page生成器的执行流程见 page.ts版本校验调用assertSupportedNextVersion确认当前工作区 Next.js 版本受支持参数规范化normalizeOptions解析项目归属、推断页面名、确定默认文件名委托给 React 生成器以isNextPage: true、export: false、classComponent: false、routing: false、skipTests: !options.withTests调用nx/react的componentGenerator生成 TSX 组件与测试文件安装样式依赖根据--style通过addStyleDependencies为项目补充 sass 等依赖swc 判定见 page.ts格式化除非--skipFormat否则对生成文件执行格式化返回任务runTasksInSerial依次执行组件安装与样式安装任务。与component生成器见 component.ts的区别在于page强制要求文件落在页面路由目录中、默认关闭导出并且文件名随路由架构自适应component则用于生成可复用的普通 React 组件。八、实战小结在 Nx 管理的 Next.js 应用中创建页面只需记住两个核心场景# 静态页面 nx g page apps/my-app/pages/my-page # 动态页面方括号段必须用引号包裹 nx g page apps/my-app/pages/products/[id]其余行为由生成器自动完成路由架构探测、目录创建、样式依赖安装、可选测试文件与代码格式化。想要更深入理解生成逻辑可以直接阅读 page.ts 与 page.spec.ts想查看page生成器如何被插件注册见 generators.json。【免费下载链接】nxThe Monorepo Platform that amplifies both developers and AI agents. Nx optimizes your builds, scales your CI, and fixes failed PRs automatically. Ship in half the time.项目地址: https://gitcode.com/GitHub_Trending/nx/nx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考