Для выполнения этого руководства требуется учетная запись GitHub. NPM и node.js version 14.4 должны быть установлены глобально. Это было разработано на Mac Book Pro.
Описание
В этом руководстве показано, как развернуть create-next-app на Netlify. Я также опишу, как добавить Environment key в серверную часть Netlify и как использовать его в приложении.
Инициализируйте приложение с помощью create-next-app.
Откройте терминал, затем введите cd desktop, а затем введите команду npx create-next-app. Затем вам будет предложено дать имя вашему проекту. Папка проекта будет у вас на рабочем столе, откройте проект с помощью Visual Studio Code (бесплатный редактор кода).
Настройте Env Key в приложении
Вверху pages/index.js под этой строкой import styles from '../styles/Home.module.css' добавьте эту строку const myKey = process.env.NEXT_PUBLIC_KEY. key будет безопасно добавлено в настройки конфигурации Netlify после того, как мы развернем приложение, что я объясню ниже, как это сделать.
Настройки приложения package.json и Netlify
В line 9 файла package.json внутри атрибута scripts: мне нужно добавить эту команду сборки "export": "next export". И я добавляю файл netlify.toml в корень приложения с добавлением в него этих двух строк command = "npm run build && npm run export" publish = "out".
Отправить приложение на GitHub
Отправьте эти изменения в основную ветку вашего репозитория GitHub. Если это не существующее приложение create-next-app, его необходимо отправить в новый репозиторий на Github.
Авторизовать Netlify
После отправки этого приложения на GitHub я перехожу на https://www.netlify.com/ и нажимаю Зарегистрироваться. На странице регистрации я использую свою учетную запись GitHub для регистрации. Я разверну это приложение прямо из репозитория GitHub, поэтому мне нужно будет разрешить Netlify доступ для чтения к репозиторию, в который я отправил код.
Настройки сборки Netlify
Чтобы начать развертывание Netlify, войдите в систему и перейдите по ссылке https://app.netlify.com/start. Процесс развертывания состоит из 3 этапов.
1. Подключитесь к провайдеру git, в этом примере я нажал GitHub.
2. Выберите Репозиторий, щелкните имя репозитория с кодом.
3. Настройки сайта и развертывание.
В Step 3 есть 4 параметра, которые следует учитывать перед развертыванием. Имя владельца будет автоматически заполнено именем команды, которое использовалось при настройке учетной записи Netlify, а второй параметр — это имя ветки, из которой я развернулся, и будет main. Путем проб и ошибок и с некоторыми полезными комментариями пользователей Netlify мне пришлось добавить эту команду сборки в настройки npm run build && npm run export и последний тип настройки out для каталога публикации. Затем нажмите кнопку Развернуть сайт.
Настройте ключ Env в настройках конфигурации Netlify.
После развертывания в Netlify в верхней части меню навигации страницы нажмите Site Overview, а затем чуть ниже нажмите кнопку Site settings. С левой стороны есть вертикальное меню, нажмите опцию Build & deploy, затем нажмите опцию Environment в том же меню, нажмите кнопку edit variables и добавьте ключ: NEXT_PUBLIC_KEY значение: your key и нажмите Save. Перейдите по URL-адресу сайта, и все готово для тестирования вашего приложения. Каждый раз, когда в основную ветку вашего репозитория вносятся изменения, Netlify будет развертываться автоматически. Спасибо за чтение!
Вот пример приложения create-next-app, которое я развернул в Netlify через github. Демо
