Next.js + Yandex Object Storage = Не работают ссылки

Размещая этот блог в 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

И мы увидим искомую страницу! 🎉

Подписывайтесь на мой Youtube канал и на Telegram 🙂