Next.js能否无需手动新建页面文件即可动态生成新页面？

完全支持，Next.js 原生就能实现你要的效果——不需要为每篇从Headless CMS拉取的内容手动创建独立页面文件，就能批量生成对应内容页，能力完全覆盖Gatsby的createPages场景，甚至灵活度更高。

核心实现逻辑 #

你只需要建1个动态路由文件，就能承接所有同结构的CMS内容页面：

• 如果你用新版App Router，在app目录下按照内容路径规则创建动态路由文件即可，比如承接所有博客文章就建app/posts/[slug]/page.js，有分类层级就建app/posts/[category]/[slug]/page.js，这一个文件就能匹配所有符合规则的内容路径。
• 如果你用旧版Pages Router，在pages目录下创建对应的动态路由文件即可，比如pages/posts/[slug].js，逻辑完全一致。

不同场景的配置方法 #

• 预生成静态页（和Gatsby构建生成页逻辑一致）
  构建阶段拉取CMS全量内容的路径标识，自动为每一条内容生成独立静态页：
  • App Router模式下，在动态路由文件里导出generateStaticParams异步函数，函数里调用CMS接口拉取所有内容的路径参数返回即可，Next.js构建时会自动遍历你返回的参数列表，为每一条内容生成独立页面。
    基础代码示例：

  // app/posts/[slug]/page.js
  // 构建时拉取所有CMS文章的路径标识
  export async function generateStaticParams() {
    const posts = await cmsClient.getAllPosts() // 替换成你自己的CMS拉取逻辑
    return posts.map(post => ({ slug: post.slug }))
  }
  
  // 单篇文章页根据路径参数拉取对应内容渲染
  export default async function PostPage({ params }) {
    const postDetail = await cmsClient.getPostBySlug(params.slug)
    return (
      <article>
        <h1>{postDetail.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: postDetail.content }} />
      </article>
    )
  }
  

  • Pages Router模式下用getStaticPaths+getStaticProps组合实现相同效果，getStaticPaths返回所有要预生成的页面路径，getStaticProps拉取单页所需的内容数据。
• 内容频繁更新场景
  开启增量静态再生成（ISR）后，不需要每次CMS更新内容就重新跑全量构建：用户访问到还没生成静态页的新内容路径时，Next.js会自动拉取最新CMS内容、生成新的静态页并缓存，全程不需要手动新建任何文件，也不需要重新执行全量构建流程。
• 纯动态渲染场景
  如果不需要预生成静态页，连generateStaticParams/getStaticPaths都不用写，用户访问匹配动态路由的路径时，服务端会实时拉取CMS内容返回，新发布的内容即时生效，零额外配置。

注意：如果你的CMS内容路径有多层结构，只需要对应调整动态路由的嵌套层级即可，全程不需要为单条内容创建独立页面文件。

内容的提问来源于stack exchange，提问作者Hamza Liaqat