Передайте данные из компонента nextjs Link и используйте их в getStaticProps

Question

У меня есть динамический маршрут, и я пытаюсь показать заголовок в URL-адресе и передать (скрыть) идентификатор моему динамическому маршруту и ​​использовать его в getStaticProps. Я обнаружил, что я не могу легко передавать данные в nextjs, как мы использовали для передачи с реагирующим маршрутизатором или другими библиотеками маршрутизации клиентов.

Я следую этому ответу, но когда я console.log(context.params) Я не вижу id прошел от Link, что я здесь делаю не так?

      // index.js

      <Link
          href={{
            pathname: `/movie/[title]`,
            query: {
              id: movie.id, // pass the id 
            },
          }}
          as={`/movie/${movie.original_title}`}
        >
          <a>...</a>
      </Link>

// [movieId].js

export async function getStaticProps(context) {
  console.log(context.params); // return { movieId: 'Mortal Kombat' }

  return {
    props: { data: "" },
  };
}

Answer 1

В context Параметр - это объект, содержащий следующие ключи:

• содержит параметры маршрута для страниц, использующих динамические маршруты. Например, если имя страницы [id].js , потом params будет выглядеть { id: ... }. - Документы

      export async function getStaticProps(context) {
  console.log(context.params); // return { movieId: 'Mortal Kombat' }
  return {
    props: {}, // will be passed to the page component as props
  }
}

Если динамическая страница выглядит как /pages/[movieId].js вы можете получить доступ к pid в context.params.movieId .

Вы не можете получить доступ к «Строке запроса», потому что, как указано в документации,

Потому что getStaticProps выполняется во время сборки, он не получает данные, которые доступны только во время запроса, такие как параметры запроса или заголовки HTTP, поскольку он генерирует статический HTML.

Если вам нужна «Строка запроса», вы можете использовать getServerSideProps,

      export async function getServerSideProps(context) {
  console.log(context.query);
  return {
    props: {}, // will be passed to the page component as props
  }
}

Редактировать:

Об этом вы должны передать то же значение, что и ключ для query который вы используете для динамических pathname:

      <Link
  href={{
    pathname: `/movie/[title]`,
    query: {
      title: movie.id, // should be `title` not `id`
    },
  }}
  as={`/movie/${movie.original_title}`}
>
</Link>;

А потом в /pages/[title].js,

      export async function getStaticProps(context) {
  console.log(context.params); // return { title: 'Mortal Kombat' }
  return {
    props: {}, // will be passed to the page component as props
  }
}

Обратите внимание, как title используется в качестве ключа как в имени файла, так и в объекте запроса в Link.