Next.js 9.3+ и универсальные маршруты

Question

Next.js здесь новичок, надеясь на указатели по использованию getStaticPaths а также getStaticPropsс комплексными маршрутами. Большинство авторов блогов Next.js 9.3+, похоже, основаны только на одном уровне сообщений в блогах (например,/posts/post-1.md, /posts/post-2.mdи т. д.), но то, что я тщетно пытался найти, это стартер - или просто набор инструкций, - которые касаются обработки, скажем, /posts/yyyy/mm/postname.md через /pages/posts/[...post].js.

Я, конечно, читал документацию Next.js по этим вопросам, но я считаю, что они немного полезны, по крайней мере, в этом конкретном случае. Я понимаю, что они написаны для более опытных разработчиков Next.js. Этот элемент из https://nextjs.org/docs/routing/dynamic-routes приближает меня настолько близко, насколько я могу в данный момент, но не достаточно далеко:

Если в названии страницы используются маршруты для приема всей почты домена, например pages/[...slug], тогда params должен содержать slugкоторый представляет собой массив. Например, если этот массив['foo', 'bar'], то Next.js статически сгенерирует страницу по адресу /foo/bar.

Я пробовал использовать fs-readdir-recursive читать /posts/ различных уровней каталога, и это работает, но то, что он дает мне, не создает массив, который getStaticPathsхочет. Я уверен, что мне просто нужно массировать результат, но я не могу найти никаких примеров, которые помогли бы мне это понять. (Большинство примеров, которые идут дальше одноуровневого сценария, похоже, имеют дело с выборкой из БД, возможно, потому, что сценарий, который я пытаюсь найти, считается слишком простым. Возможно, для не новичков, но...)

Answer 1

Если все ваши сообщения следуют одним и тем же шаблонам URL, я бы предпочел использовать следующую структуру:

pages/
└── posts/
    └── [year]/
        └── [month]/
            └── [slug].js

В зависимости от того, как вы храните свои сообщения, ваш getStaticPaths останется только перечислить сообщения и выставить year, month а также slug за каждый пост.

export async function getStaticPaths() {
  const posts = await getAllPosts()

  return {
    fallback: false,
    paths: posts.map(post => ({
      params: {
        year: post.year,
        month: post.month,
        slug: post.slug
      }
    })
  }
}

Тогда у вас будет доступ ко всем year, month а также slug параметры в getStaticProps.

export async function getStaticProps({params}) {
  // Retrieve blog post from year, month and slug
  const post = await getBlogPost({
    year: params.year,
    month: params.month,
    slug: params.slug
  })

  return {
    props: {
      post
    }
  }
}