Размещая этот блог в Yandex Object Storage мы столкнулись с некоторыми проблемами.
В этой статье мы расскажем об одной из них.
Проблема
Очень часто при попытке хостить Next.js приложение использующее App Router в S3 бакете можно столкнуться с тем что:
- Страницы приложения не открываются при заходе по прямой ссылке,
- при этом при переходе через нажатие по внутренней ссылке всё работает как надо.
На первый взгляд такое поведение вводит в ступор. Но у этой ситуации есть две вполне логичные причины.
Причина 1
По умолчанию для страницы /about генерируются страницы вида /about.html.
Такой формат файлов не подходит для того чтобы хоститься в S3 бакете по той причине что URL-адрес example.com/about будет всегда отвечать ошибкой 404.
Происходит это потому что в бакете нет объекта с таким именем.
Для того чтобы получить этот объект URL-адрес должен содержать ещё и расширение файла (example.com/about.html)
Причина 2
По умолчанию Next.js перенаправляет URL-адреса с косой чертой в конце на их аналог без косой черты в конце.
Например, /about/ будет перенаправляться на /about.
Нам нужно настроить это поведение так, чтобы оно действовало противоположным образом:
URL-адреса без завершающих косых черт должны перенаправляться на их аналоги с завершающими косыми чертами.
Решение
Чтобы изменить поведение по умолчанию, нужно изменить пару параметров в файле next.config.js.
Добавляем настройку trailingSlash со значением true.
trailingSlash: true,И проверяем что значением поля output является export.
output: "export",Итоговый конфиг должен выглядеть следующим образом:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
trailingSlash: true,
};
module.exports = nextConfig;При такой конфигурации страница /about генерит файл /about/index.html (вместо /about.html по умолчанию).
В таком случае при обращении по адресу example.com/about:
- Next.js перенаправит нас по адресу example.com/about/
- Бакет при обращении по адресу example.com/about/ отдаст нам файл /about/index.html
И мы увидим искомую страницу! 🎉
На этом всё. Спасибо за внимание!
