Демо самостоятельно разворачиваемого приложения Next.js
Это демо приложения Next.js, развернутого на Ubuntu Linux. Оно также включает базу данных Postgres и прокси Nginx. Смотрите код.
Получение данных
Произвольный покемон: ivysaur
Это значение получено с помощью fetch из API. Эта страница обрабатывается динамически, получение произвольного покемона выполняется при каждом запросе. Перезагрузите страницу для того, чтобы увидеть нового покемона.
Оптимизация изображений
Next.js поддерживает оптимизацию изображений из коробки с помощью next start. Изображение выше оптимизировано сервером Next.js.
В Next.js 15 больше не нужно вручную устанавливать sharp для оптимизации изображений, локальных или внешних.
Для оптимизации изображений с помощью сторонних сервисов можно создать собственный загрузчик (loader) изображений. Пример можно найти здесь, а включить загрузчик нужно в next.config.ts.
Потоки
Роутер приложения Next.js поддерживает потоки. В этом демо используется Suspense с async компонентом для стриминга разных компонентов с задержкой. Мы позволяем Nginx обрабатывать сжатие для нашего приложения, а затем отключаем буферизацию прокси для включения потоковых ответов.
База данных Postgres
Этот роут читает и пишет в базу данных [Postgres](https://www.postgresql.org/), которая находится в собственном контейнере Docker. Она использует [Prisma](https://www.prisma.io/) в качестве ORM. Также существует задача cron, которая очищает данные каждые 10 минут. Конечная точка, которую использует cron для отправки запроса POST в /db/clear доступна публично.
Кэширование / инкрементальная статическая регенерация
Пол умолчанию Next.js ISR использует lru-cache и хранит кэшированные сущности в памяти. Это работает из коробки, как для кэширования данных как таковых, так и для ISR, как в новом роутере (приложения), так и в старом (страниц).
Можно хранить сущности в чем-то вроде [Redis](https://redis.io/). Это рекомендуется делать для приложений, работающих в нескольких контейнерах. Наше приложение работает в одном контейнере, поэтому в этом нет необходимости.
У нас есть роут, который получает данные из API с помощью fetch с настройкой revalidate со значением в 10 секунд. Это означает, что данные будут "свежими" максимум в течение этого времени. Смотрите заголовок ответа s-maxage=10, stale-while-revalidate=31536000.
По умолчанию время stale-while-revalidate для статических страниц, которые не определяют время revalidate, составляет 1 год, однако, это можно изменить с помощью swrDelta в next.config.ts.
Посредник
Роут /protected защищен куки. Вы будете перенаправляться обратно на /. Для того, чтобы увидеть роут, нужно добавить куки protected=1 в браузере.
Посредник не имеет доступа ко всем API Node.js. Он предназначен для запуска перед всеми роутами приложения. Однако планируется поддержка всей среды Node.js, что может быть необходимым при использовании некоторых сторонних библиотек.
В посреднике не рекомендуется выполнять проверки, такие как получение данных пользователя из базы. Эти проверки должны выполняться перед запросами и мутациями. Одним из популярных паттернов является проверка в посреднике куки аутентификации.
Запуск сервера
Next.js включает файл instrumentation, который выполняет некоторый код при запуске сервера.
Этот файл стабилизирован в Next.js 15. Он предназначен для чтения секретов из удаленных локаций, таких как Vault или 1Password. Вы можете протестировать эту возможность путем установки переменных для Vault в файле .env, хотя для демо это не нужно.
Переменные окружения
Next.js поддерживает загрузку переменных из файлов .env.
В серверных компонентах переменные окружения динамически читаются каждый раз. Для контейнеризованных приложений обычной практикой является передача разных переменных в зависимости от среды выполнения.
Это значение читается из process.env: my-secret