В этом руководстве мы собираемся использовать create-next-app, Github, Netlify и namescheap для развертывания статического веб-сайта Next.js с личным доменным именем.
Next.js - это готовая к производству библиотека, использующая React, с дополнительными преимуществами, такими как рендеринг на стороне сервера и маршрутизация из коробки. Для получения дополнительной информации посетите nextjs.org.
Конечно, есть и другие варианты регистрации доменного имени и хостинга сайтов, но Namescheap предоставляет наименее дорогие домены, которые я нашел, с ними легко работать, а также бесплатно предоставляется защита конфиденциальности whoIs (так что вы не будете засыпаны спамом звонками. и электронные письма при регистрации нового домена). Vercel - это очень простая хостинговая платформа.
Примечание: этот метод применим только к статическим сайтам, созданным с помощью Next.js. Для динамических сайтов потребуется серверная часть, размещенная на node.js.
ШАГ 1 ИЗ 5. Создайте приложение
Для начала создайте новое приложение Next.js под названием «my-awesome-app», используя create-next-app: (вы, конечно, можете изменить имя приложения на любое, какое захотите).
В терминале введите:
npx create-next-app my-awesome-app cd my-awesome-app
ВАЖНО: В файле package.json измените команду "build" на "next build && next export"
ШАГ 2 ИЗ 5. Отправьте свое приложение на GitHub
Затем создайте новое репозиторий GitHub для проекта и загрузите в него свой проект.
В GitHub нажмите кнопку «Создать» в левом верхнем углу:
Введите имя приложения и нажмите кнопку «создать репозиторий» внизу экрана:
Скопируйте код, чтобы протолкнуть существующий репозиторий из командной строки:
Вставьте код в терминал, чтобы загрузить свой код.
ШАГ 3 ИЗ 5. Настройте Netlify для хостинга
Затем войдите в Netlify (создайте учетную запись, если вы еще этого не сделали).
Нажмите «Новый сайт из Git».
На следующем экране выберите «GitHub».
На следующем экране прокрутите вниз, чтобы найти репозиторий GitHub для приложения:
Затем на следующем экране нажмите «Развернуть сайт».
Для команды «Построить» введите yarn build, а для «Каталог публикации» введите out/.
Затем нажмите «Настройки домена».
Затем нажмите «Добавить собственный домен».
Введите свой домен и нажмите "Подтвердить".
Затем нажмите «Да, добавить домен».
Вернувшись на экран настроек домена, скопируйте ссылку .app. Вы будете использовать его позже, после регистрации личного домена.
ШАГ 4 ИЗ 5. Зарегистрируйте собственное доменное имя на Namescheap
Зарегистрируйте доменное имя на Namescheap
После завершения покупки войдите в Личный кабинет, найдите доменное имя, которое вы хотите перенести, и нажмите кнопку «УПРАВЛЕНИЕ».
Затем нажмите «Advanced DNS».
Нажмите «Добавить новую запись».
Прокрутите вниз до CNAME и нажмите
Для «Host» введите «www», а для «Value» вставьте ссылку .app из Netlify. Нажмите на зеленую галочку, и все готово.
ШАГ 5 ИЗ 5: Добавьте свой домен в Netlify
Ваше собственное доменное имя должно появиться на Netlify:
Зайдите на свой новый сайт и начните настраивать его :). Когда вы нажимаете на репозиторий GitHub, ваш сайт обновляется автоматически.
Спасибо за чтение.
Если вы создали веб-приложение с помощью этого метода, я хотел бы знать! Пожалуйста, оставьте комментарий ниже.
Примечание: ссылка namescheap является партнерской. Я использую namecheap для всех моих личных веб-сайтов, так как я обнаружил, что на них самые лучшие и самые дешевые услуги. Не стесняйтесь вместо этого переходить прямо на их веб-сайт.
