CDN или нет — вот в чем вопрос

#frontend #react #nextjs

При масштабировании frontend-приложений на фреймворке Next.js нам часто приходится размещать статические файлы сборки на CDN-ресурсах. К таким файлам относятся бандлы JS/CSS и элементы дизайна в виде медиафайлов.

В Next. js предусмотрен стандартный механизм управления адресом хранения статических файлов приложения. Через параметр assetPrefix можно задать префикс, который будет использован при формировании пути к ассетам. Установить значение параметра можно в файле next.config.js.

С помощью переменных окружения можно управлять префиксом, подменяя его для различных сред развертывания.

Для тестового окружения переменная среды ASSET_PREFIX в .env-файле будет пустой, а для промышленного — будет содержать URL-адрес CDN-сервиса.

Например, в Stylus можно использовать префиксы при формировании адресов таким образом.

А в компонентах переменная окружения будет доступна из свойства env объекта process.

Пример конфигурации приложения для работы с различными префиксами, в зависимости от текущего окружения, можно посмотреть в сниппете.

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.