Одностраничному приложению Next.js / React нужны URL-адреса для каждого элемента

Question

Я создал одностраничное приложение в Next JS + React JS + Tailwind, где я загружаю несколько элементов из firebase.

Я использую docRef Firebase в качестве идентификатора в приложении. Теперь я хочу, чтобы пользователи могли ссылаться на элемент из URL-адреса и делиться им с другими. Как мне это реализовать?

Я изучал Next.js Routing / Dynamic routing и маршрутизатор React, однако, поскольку я впервые использую React и Next.js, я не знаю, с чего начать. Любая помощь горячо приветствуется. Спасибо!

Answer 1

Если я правильно понял: у вас есть страница обзора и страницы с подробностями. С точки зрения маршрутизации это будет выглядеть так: / overview и / overview / $ {ID}.

Вам следует взглянуть на https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation . Более подробно:

      // pages/posts/[id].js

function Post({ post }) {
  // Render post...
}

// This function gets called at build time
export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: false } means other routes should 404.
  return { paths, fallback: false }
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

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

export default Post

Внутри getStaticPaths вы определяете, какие динамические пути доступны. Next.js сгенерирует эти страницы. Внутри getStaticProps вы передаете объект, возвращаемый из getStaticPaths. Внутри возврата этой функции вы передаете всю информацию / реквизиты, необходимые для создания страницы сведений.