Next.js中app与pages目录的正确用法及混合使用可行性咨询

Next.js 13 官方支持混合使用 /pages 和 /app 目录，你完全可以仅在 /app 目录中实现动态站点地图功能，保留原有 /pages 目录的业务代码不动，这种渐进式引入新特性的方式非常合理。

关键注意事项 #

• 路由优先级：如果 /app 和 /pages 目录存在同名路由（比如两者都有 about 路由），/app 目录的路由会优先被匹配。不过你仅用 /app 做站点地图，完全不用担心路由冲突问题。
• 站点地图的正确实现方式：在 /app 目录下，有两种推荐的动态站点地图实现方式：
  1. 创建 sitemap.ts 文件（官方推荐）：直接返回符合规范的站点地图数据，Next.js 会自动处理路由并输出 XML 格式
  2. 创建 sitemap.xml/route.ts 文件：手动编写逻辑返回 XML 响应

示例代码（官方推荐方式） #

在 /app/sitemap.ts 中编写如下代码：

import { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // 动态获取页面数据，比如从数据库或API拉取内容
  const posts = await fetch('https://your-api-domain/posts').then(res => res.json())
  const postEntries = posts.map((post: any) => ({
    url: `https://your-domain.com/posts/${post.slug}`,
    lastModified: post.updatedAt,
    changeFrequency: 'weekly' as const,
    priority: 0.8,
  }))

  // 补充现有/pages目录的静态路由
  const staticRoutes = [
    {
      url: 'https://your-domain.com',
      lastModified: new Date(),
      changeFrequency: 'daily' as const,
      priority: 1,
    },
    {
      url: 'https://your-domain.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly' as const,
      priority: 0.7,
    },
  ]

  return [...staticRoutes, ...postEntries]
}

部署后，访问 your-domain.com/sitemap.xml 就能得到动态生成的站点地图，完全不会影响原有 /pages 目录的业务逻辑。

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