Динамические маршруты Next.js: избегайте создания новых страниц для параметров пути

Question

tl;dr: мне нужно вести себя как

Я использую Next.js 10. Мне бы хотелось иметь маршруты вроде mypage.com/users/123 а также mypage.com/users/445. Все мои поиски приводят меня к динамической маршрутизации, которая предлагает использовать эту структуру под pages папка:

      users/
   [user_id].js

В моем случае это не работает, потому что тогда на сервере создается новая страница для каждого пользователя. Мне нужна только одна статически сгенерированная страница под users/, который получает в качестве параметра на стороне клиента.

С параметрами запроса это просто. Я могу использовать эту структуру папок

      users/
   index.js

а затем, когда кто-то идет в mypage.com/users?user_id=123, обслуживается та же страница, а затем js-код на стороне клиента может получить доступ к user_id.

Возможное решение

Мое текущее решение (которое я считаю слишком сложным, но может кому-то помочь) добавляет rewrite на next.config.js, как это:

      module.exports = {
  rewrites() {
    return [{ source: '/users/:user_id', destination: '/users?user_id=:user_id' }];
  }
}

Answer 1

Если я правильно понимаю, вы не хотите создавать статические страницы для каждого пользователя.

Поэтому вам нужно использовать рендеринг на стороне сервера (SSR) вместо создания статического сайта (SSG). Для этого вам нужно использовать getServerSideProps вместо getStaticProps or getStaticPaths.

      // This gets called on every request
export async function getServerSideProps(context) {
  // Find user
  const user = await GetTheUserSomehow(context.params.user_id);

  // Pass data to the page via props
  return { props: { user: user } }
}

Ссылки для справки:

https://nextjs.org/docs/basic-features/pages#server-side-rendering

https://nextjs.org/docs/basic-features/pages#static-generation-recommended