При использовании fetch в Next.js и размещении на GitHub Pages страница вылетает?

"Привет, разработал приложение на NextJs (версии 13.4.20-canary.13) и выложил его на GitPage. Однако при переходе на страницу GitPage появляется ошибка "This page could not be found". Я обнаружил, что проблема связана с тем, что моё приложение делает запросы. (Я проверил, что страница загружается без запросов).

Может ли быть такая ситуация нормальной, или я что-то делаю неправильно?"
  • 18 января 2024 г. 14:19
Ответы на вопрос 2
Приведенная вами ошибка "This page could not be found" чаще всего возникает, когда на GitHub Pages пытается обратиться к маршруту, который не существует. Это может быть вызвано рядом проблем, связанных с настройкой Next.js и его роутингом при размещении на GitHub Pages.

Важно понимать, что GitHub Pages статично хостит файлы, поэтому серверный рендеринг (SSR) и API роуты, которые обычно поддерживаются Next.js, не работают прямо из коробки.

Вот несколько возможных причин и способов решения вашей проблемы:

1. **SPA Mode**: Вам может потребоваться настроить ваше приложение как одностраничное приложение (SPA) с использованием статического экспорта `next export`, чтобы оно полностью компилировалось в статические файлы перед деплоем.

2. **Base Path**: Вы можете убедиться, что у вас правильно настроен базовый путь (`basePath`) в вашем файле `next.config.js`. Для GitHub Pages часто требуется установить `basePath` равным имени вашего репозитория.

   Пример:
   ```javascript
   module.exports = {
     basePath: '/your-repo-name',
     assetPrefix: '/your-repo-name/',
   }
   ```

3. **Client-Side Navigation**: Next.js использует клиентскую навигацию, которая может не работать из-за ограничений GitHub Pages. Вы можете проверить настройки маршрутизации и использовать хэш-роутинг (что не идеально) или настроить страницу 404 на GitHub Pages, чтобы перехватывать запросы и обрабатывать клиентский роутинг.

4. **Запросы Fetch**: Если ваша ошибка связана с fetch запросами, убедитесь, что вы используете правильные URL или пути к API, и что эти запросы доступны в интернете. Вам может потребоваться модифицировать запросы или воспользоваться serverless функциями или внешним API, чтобы обеспечить их работоспособность.

5. **404.html**: Создайте файл `404.html`, который будет перенаправлять запросы на `index.html`, что позволит Next.js управлять маршрутизацией на клиентской стороне.

6. **_redirects**: Используйте файл `_redirects` в публичном каталоге с правилом перенаправления, чтобы все запросы перенаправлялись на `index.html`.

7. **Проверьте консоль браузера**: Откройте консоль разработчика в браузере и проверьте ошибки в сетевых запросах. Может быть, ошибка состоит в неправильном URL, неудачном CORS запросе и т.д.

8. **Документация GitHub Pages**: Убедитесь, что вы следуете инструкциям в официальной документации GitHub Pages по размещению статических сайтов и SPA.

Если проблема все еще не решена, вы можете рассмотреть возможность использования других платформ для хостинга, которые поддерживают SSR, например Vercel (от создателей Next.js) или Netlify, которые предлагают лучшую интеграцию с Next.js.
Не думаю, что githubpages подходит для этого. Конечно, за то время, когда я был там крайний раз, что-то поменялось, но все же. 
Попроубуйте vercel или netlify
Похожие вопросы