Jump to content

Netlify

Netlify это альтернативый провайдер развертывания, похожий на Vercel. Вот ajcwebdev/ct3a-netlify↗ пример репозитория на основе этой документации.

Зачем развертывать на Netlify

Принято считать, что Vercel имеет лучшую поддержку Next.js потому что Vercel разрабатывает Next.js. Они заинтересованы в том, чтобы платформа была настроена для оптимальной производительности и DX с Next.js. В большинстве случаев это будет правдой и в отклонении от стандартного пути не будет смысла.

Также существует общее мнение о том, что многие функции Next.js поддерживаются только на Vercel. Хотя это правда, что новые функции Next.js будут тестироваться и поддерживаться на Vercel в момент выпуска по умолчанию, также следует учитывать, что другие провайдеры, такие как Netlify, быстро реализуют и выпускают поддержку↗ для стабильных функций Next.js↗.

У всех провайдеров развертывания есть преимущества и недостатки, поскольку ни один хост не может иметь лучшую поддержку для всех случаев использования. Например, Netlify разработал свой собственный пользовательский Next.js runtime↗ для Netlify Edge Functions (которые работают на Deno Deploy) и поддерживают уникальные промежуточные программы для доступа и изменения HTTP-ответов↗.

Обратите внимание: Для того, чтобы отслеживать статус нестабильных функций Next 13, см. Использование каталога app Next 13 на Netlify↗.

Конфигурация проекта

Существует несколько способов настройки инструкций сборки, включая прямое использование Netlify CLI или Netlify Dashboard. Хотя это не обязательно, рекомендуется создать и включить файл netlify.toml↗. Это гарантирует, что форкнутые и клонированные версии проекта будут легче повторно развернуть.

[build]
  command = "next build"
  publish = ".next"

Использование Netlify Dashboard

  1. Запушьте свой код в репозиторий GitHub и зарегистрируйтесь на Netlify↗. После того, как вы создали аккаунт, нажмите Add new site и затем Import an existing project.

Новый проект в Netlify

  1. Подключите свой Git-провайдер.

Импортируйте репозиторий

  1. Выберите репозиторий вашего проекта.

Выберите репозиторий вашего проекта

  1. Netlify обнаружит, если у вас есть файл netlify.toml и автоматически настроит команду сборки и каталог публикации.

Настройки сборки Nextjs

  1. Нажмите Show advanced и затем New variable, чтобы добавить свои переменные среды.

Добавьте переменные среды

  1. Нажмите Deploy site, подождите, пока сборка завершится, и просмотрите свой новый сайт.

Использование Netlify CLI

Для того, чтобы развернуть проект из командной строки, вы должны сначала запушить свой проект в репозиторий GitHub и установить Netlify CLI↗. Вы можете установить netlify-cli как зависимость проекта или установить его глобально на вашем компьютере с помощью следующей команды:

npm i -g netlify-cli

Для того, чтобы протестировать свой проект локально, запустите команду ntl dev↗ и откройте localhost:8888↗ для просмотра вашего локально запущенного приложения Netlify:

ntl dev

Запустите команду ntl init↗, чтобы настроить ваш проект:

ntl init

Импортируйте переменные среды вашего проекта из вашего файла .env с помощью ntl env:import↗:

ntl env:import .env

Разверните ваш проект с помошью ntl deploy↗. Вам нужно будет передать флаг --build, чтобы запустить команду сборки перед развертыванием, и флаг --prod, чтобы развернуть на основном URL вашего сайта:

ntl deploy --prod --build

Для просмотра примера на Netlify, перейдите на ct3a.netlify.app↗.