Блог

Прежде всего, приношу извинения, если это немного сбивает с толку. Это потому, что я тоже в замешательстве.
Я довольно новичок в Next.js и я переношу сайт с Гэтсби, используя WP в качестве безголовой CMS. Я не создавал исходный сайт, поэтому я наследую кучу кода, с которым я не знаком.

Я использую /pages/listing/[slug].js компонент для создания индивидуальных списков для этого клиента. Я выбираю пути , запрашивая у всех слизней их списки getStaticPaths и используя слизни для запроса базы данных, чтобы получить данные для страницы getStaticProps . Пока все хорошо. Единственная проблема сейчас в том, что мне сказали, что клиент хочет сохранить свои URL — адреса в том виде, в каком они есть в настоящее время-например listing/experience/location/product-name-here (где product-name-here пуля, которую я извлек из CMS), но я только понял, как это сделать listing/product-name-here .

Мои неудачные подходы до сих пор заключались в том, чтобы:

• Измените компонент на [...slug].js , но меня ругают за то, что пуля не является массивом. Даже если я изменю его в массив вручную при извлечении статических путей, поскольку извлекается только пуля, я все равно не использую правильный URL-адрес.
• Используйте as опору на Link компоненте. Он отправляет меня по ссылке, которую я хочу сейчас, но я получаю ошибку 500. Если я введу URL вручную, используя href реквизит (т. Е. listing/product-name-here ), страница загружается правильно, но с неправильным URL-адресом.

Я задавался вопросом, есть ли какой-то способ получить доступ к URL-адресу, но единственное, с чем я столкнулся до сих пор useRouter , это то, что, поскольку это крючок, я не могу использовать его вне самого компонента.

Не стесняйтесь задавать любые вопросы, если это неясно. Я оставил фрагменты кода, потому что чувствую, что мой подход в корне неверен, а не является досадной ошибкой, которую я получаю.

Редактировать Проблема в конечном итоге была решена , fallback установив значение true и установив чертовски много дополнительных цепочек для всего, что связано с обработкой данных, связанных с API, а также пустые значения по умолчанию для всех реквизитов. Мое внутреннее чутье все еще подсказывает, что это не правильный «Следующий» способ справиться с этим, но проект был перенесен из Гэтсби и вроде как включен, так что мне просто нужно было заставить его работать.

Отредактировано, так как первый ответ не работал.

Используйте pages/listing/[...slug].js в качестве имени файла, а затем возвращайте из getStaticPaths объекта, подобного этому:

   return {
    paths: [
      { params: { slug: ["path1"] } },
      { params: { slug: ["path2"] } },
      { params: { slug: ["deeper", "path"] } }
    ],
    fallback: false
  };
 

Это означает, что работают следующие адреса:

• список/путь 1
• список/путь 2
• список/глубже/путь

Затем вы можете получить доступ к пуле в виде массива getStaticProps из контекста context.params.slug . Это будет содержать ["path1"] , ["path2"] или ["deeper", "path"] в зависимости от посещенной страницы.

Вы можете попробовать это в песочнице ниже:

https://codesandbox.io/s/confident-microservice-lu2jl?file=/pages/listing/[…slug].js