Блог

У меня около 8 категорий страниц подробностей, половина из которых-страницы подробностей, другая половина-страницы редакций. Данные для этих 2 типов страниц совершенно разные, и вложение одного маршрута во вложенную папку не является вариантом.

 pages/[detailPageCategory]/[slug].js
pages/[editorialPageCategory]/[slug].js
 

В идеале я бы создал отдельные компоненты страниц для обоих, чтобы разделить проблемы, но Nextjs не может обрабатывать два динамических маршрута одного и того же уровня.

 pages/[pageType]/[slug].js
 

Будет ли лучшей идеей обрабатывать оба маршрута в одном динамическом маршруте? Это кажется нечистым, так как обе страницы связаны вместе, и мне нужно будет передать опору на страницу pageType={layout1|layout2} и обработать оба случая в компоненте страницы, не разделяя проблемы.

 const DynamicRoutePage = ({ pageType, data }) => {
  if (pageType === "detail") {
    return (
      <DetailPage {...data} />
    )
  }
  if (pageType === "editorial") {
    return (
      <EditorialPage {...data} />
    )
  }
  return null
}
 

Существуют ли лучшие методы, как подойти к этому? Возможно, следующая функция «getLayout»?

Вы можете создать папку «контейнеры», и в ней у вас может быть шаблон для страниц каждой категории, таким образом, вы можете отделить разные страницы пользовательского интерфейса.

На реальных страницах вы можете [динамический импорт][1], основанный на типе страницы.

Так что шаблон страницы будет разделен на разные куски, и он не будет загружен сразу.

 const DetailPage = dynamic(() => import('../containers/DetailPage'))
const EditorialPage = dynamic(() => import('../containers/EditorialPage'))

const DynamicRoutePage = ({ pageType, data }) => {
  if (pageType === "detail") {
    return (
      <DetailPage {...data} />
    )
  }
  if (pageType === "editorial") {
    return (
      <EditorialPage {...data} />
    )
  }
  return null
}