Блог

Главная - Вопросы по программированию - NextJS Необязательно перехватывать все маршруты, которые не работают при развертывании

NextJS Необязательно перехватывать все маршруты, которые не работают при развертывании

#next.js #react-i18next #nextjs-dynamic-routing

Вопрос:

У нас есть проект, содержащий один динамический маршрут [ProductID], и внутри этой страницы у нас есть несколько других страниц, которые включают дополнительные маршруты для всех. Вот структура папки «Страницы»:

 [productId]
  contentOne
    [[...slugOne]]

Проблема в том, что необязательные уловки не работают должным образом всякий раз, когда страницы создаются статически. Экс:
ProductID/contentOne не работает, но ProductOne/contentOne/дополнительные работы
Проблема возникает только при развертывании в vercel. Все маршруты отлично работают на местных.
Вот getStaticPaths:

 export async function getStaticPaths() {    
  return {    
    paths: [],    
     fallback: true,    
   }    
 }

Вот getStaticProps:

 export async function getStaticProps({ locale }) {
  return {
    props: {
      test: 'test',
      ...(await serverSideTranslations(locale, ['common'])),
    }
  }
}

Ответ №1:

При использовании getStaticPaths для создания ваших страниц настройка { fallback: true } не приводит к 404. Во время разработки это работает, потому что при разработке используется версия автоматической статической оптимизации, при которой Next обслуживает сайт, отображаемый сервером, даже если страницы будут статичными.

Если вы запускаете сайт SSR с Next, то при настройке fallback будет отображаться статическая страница с пустыми реквизитами. Это ожидаемое поведение (если это то, что происходит с вами), и вы обязаны обрабатывать эту страницу либо перенаправляя на сторону клиента, либо показывая свою собственную страницу 404-го типа или отсутствующую страницу содержимого.

Если вы используете next export для создания и экспорта своих страниц, то настройка fallback ничего не делает (ожидаемое поведение при использовании next export ), что означает, что страница просто не будет существовать, и ваш сервер должен обработать 404, либо открыв страницу с ошибкой 404, либо перенаправив пользователя куда-либо еще.

Я не уверен, что вы подразумеваете под «не работает» — это ошибка 404 или пустая страница? В любом случае, вышеизложенное является причиной.

Комментарии:

1. Извините. ДА. Мы получаем 404 в прод. Мы используем ISR, а не следующий экспорт, и для стандартных маршрутов это приводит к созданию «на лету», что мы и намереваемся. Однако для приведенной выше стратегии маршрутизации, если мы предварительно построим, страницы будут работать нормально, но для маршрутов, которые мы не создали заранее, они не создаются на лету в prod, просто выдают клиентскую часть 404.

2. кстати. Я работаю с оригинальным плакатом, поэтому взял на себя смелость прокомментировать его от его имени 🙂

3. Эта ссылка предварительно собрана и работает: staging.ttwithme.com/primrose/social Этот не является предварительно встроенным и не работает: staging.ttwithme.com/expjazzandrade/social . В местном, оба работают

4. Под «не работает» я подразумеваю 404. Извините, что сначала не совсем ясно выразился. Итак, у нас есть пустая страница для тестирования, и страница возвращает 404. Ссылка: staging.ttwithme.com/dummy/test

5. @ExpeditoAndrade Я сталкиваюсь с этой проблемой, но вместо отступления: правда, я использую отступление: «блокировка». Вы пришли к какому-то решению?

Метки: ,