在 Next.js 14 中，拦截特定 slug 时设置动态路由的正确架构方法是什么？

Question

学习 Next.js 14 我一直在阅读关于 动态路由 的文档。如果我基于

slug

定位网站中的所有页面，但我想渲染一些特定的内容，比如说

contact

或

about

页面，哪种方法是准确的？

如果我的结构是：

app
  [slug]
    page.tsx
  /contact
    page.tsx
  /about
    page.tsx
  blog/[slug]
    page.tsx

文件系统工作正常。在一些阅读中，我注意到使用了

page

条件，因此这是正确的方法：

import {Fragment} from 'react'
import { notFound } from 'next/navigation'

type Props = {
  readonly params: {
    slug: string
  }
}

export default async function Pages({params}: Props) {
  if (params?.slug === 'about') return <About />

  if (params?.slug === 'contact') return <Contact />

  if (params?.slug === null) return notFound();

  // async run query

  return // removed logic
}

这样我就会：

app
  [slug]
    page.tsx
    contact.tsx
    about.tsx
  blog/[slug]
    page.tsx

研究

• 动态路线
• 并行路线
• 拦截路线
• 如何在 Next.js 中实现重定向

在 Next.js 14 中，处理与特定 slug 匹配的页面的正确文件结构是什么？

Answer 1

取自https://nextjs.org/docs/app/building-your-application/routing/colocation

除了路由文件夹和文件约定之外，Next.js 对于如何组织和放置项目文件没有任何意见。

对于如何组织项目没有硬性规定，NextJS 让您根据自己的要求来决定。

您的第一种方法对我来说似乎很有意义，因为联系页面和关于页面不是动态的。该结构常用且易于理解。

您的第二种方法可能会让其他开发人员感到困惑

app
  [slug]
    page.tsx
    contact.tsx
    about.tsx

乍一看，好像有这样的路线

/subject-1

、

/subject-1/contact

、

/subject-1/about

/subject-2

、

/subject-2/contact

、

/subject-2/about

但事实上，有代码可以控制渲染哪个组件

export default async function Pages({params}: Props) {
  if (params?.slug === 'about') return <About />

  if (params?.slug === 'contact') return <Contact />

  if (params?.slug === null) return notFound();

  // async run query

  return // removed logic
}

这是不必要的，因为基于文件的路由已经可以优雅地处理它了