#frontend #react #nextjs
При масштабировании frontend-приложений на фреймворке Next.js нам часто приходится размещать статические файлы сборки на CDN-ресурсах. К таким файлам относятся бандлы JS/CSS и элементы дизайна в виде медиафайлов.
В Next.js предусмотрен стандартный механизм управления адресом хранения статических файлов приложения. Через параметр
assetPrefix можно задать префикс, который будет использован при формировании пути к ассетам. Установить значение параметра можно в файле next.config.js.С помощью переменных окружения можно управлять префиксом, подменяя его для различных сред развертывания.
Для тестового окружения переменная среды
ASSET_PREFIX в .env-файле будет пустой, а для промышленного — будет содержать URL-адрес CDN-сервиса.Например, в Stylus можно использовать префиксы при формировании адресов таким образом.
А в компонентах переменная окружения будет доступна из свойства
env объекта process.Пример конфигурации приложения для работы с различными префиксами, в зависимости от текущего окружения, можно посмотреть в сниппете.