Next.js и Vercel

Vercel создан разработчиками Next.js и обеспечивает первоклассную поддержку для Next.js. При развертывании вашего Next.js-приложения на Vercel по умолчанию происходит следующее:

• Страницы, использующие Статическую генерацию, и ресурсы (JS, CSS, изображения, шрифты и т.д.) автоматически обслуживаются через CDN Vercel, который работает молниеносно.
• Страницы с Рендерингом на стороне сервера (SSR) и API-маршруты автоматически становятся изолированными Бессерверными функциями (Serverless Functions). Это позволяет масштабировать рендеринг страниц и API-запросы бесконечно.

Vercel предлагает множество дополнительных возможностей, таких как:

• Пользовательские домены: После развертывания на Vercel вы можете назначить вашему Next.js-приложению пользовательский домен. Подробнее в документации.

• Переменные окружения: Вы можете устанавливать переменные окружения в Vercel. Подробнее в документации. Затем эти переменные можно использовать в вашем Next.js-приложении.

• Автоматический HTTPS: HTTPS включен по умолчанию (включая пользовательские домены) и не требует дополнительной настройки. SSL-сертификаты обновляются автоматически.

Подробнее о платформе можно узнать в документации Vercel.

Превью-деплой при каждом пуше

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

После развертывания на Vercel попробуйте выполнить следующее:

• Создайте новую ветку в вашем приложении.
• Внесите изменения и отправьте их в GitHub.
• Создайте новый пул-реквест (справка GitHub).

На странице пул-реквеста вы увидите комментарий от бота vercel.

Попробуйте перейти по Preview URL в этом комментарии. Вы увидите внесенные изменения.

При открытом пул-реквесте Vercel автоматически создает превью-деплой для этой ветки при каждом пуше. URL превью всегда указывает на последнюю версию превью-деплоя.

Этим URL можно поделиться с коллегами для получения быстрой обратной связи.

Если превью-деплой выглядит хорошо, мержите его в main. При этом Vercel автоматически создаст продакшен-деплой.

Разработка, Превью, Публикация

Мы только что прошли рабочий процесс под названием DPS: Develop (разработка), Preview (превью), Ship (публикация).

• Разработка: Мы писали код на Next.js, используя сервер разработки Next.js с функцией горячей перезагрузки.
• Превью: Мы отправили изменения в ветку на GitHub, и Vercel создал превью-деплой, доступный по URL. Этим URL можно поделиться для получения обратной связи. Помимо проверки кода, можно проверять и деплой.
• Публикация: Мы вмержили пул-реквест в main для публикации в продакшен.

Мы настоятельно рекомендуем использовать этот рабочий процесс при разработке Next.js-приложений — он поможет вам быстрее итерировать над приложением.