Как построить сайт jamstack с next.js и vercel - jamstack Справочник

Архитектура jamstack – это современный подход к старой идее: делая быстрые, статические сайты, но делая их динамическими инструментами, такими как JavaScript.

Как мы можем использовать веб-структуру Next.js и хостинговую платформу Vercel для создания и развертывания исполнительных и надежных веб-приложений?

Примечание: Это предварительный просмотр моего DamStack Handbook Руководство ко всем вам нужно знать о джамате. У него есть 3 учебника, включая этот. Получите свою копию И узнайте, как построить быстрые, динамические приложения с JavaScript и Static Web.

Что мы будем строить?
Шаг 1: Начало работы с следующим. Js ract app.
Шаг 2: Настройка проекта с Git
Шаг 3: Развертывание Next.js с vercel
Что мы просто развернули?
Понимание современного CI/CD с Git
Изменить и просмотреть его автоматически развернуть
Что мы узнали?

Next.js это веб-каркас, который построен и поддерживается Vercel Отказ Next.js позволяет легко раскрутить новое приложение React Application и обеспечивает тонну функций из коробки, подобной серверу бокового рендеринга (SSR) и статического поколения сайта (SSG).

Что мы будем строить?

Сам наш проект будет относительно простым. Мы собираемся использовать по умолчанию Next.js Starter, как способ легко загрузить проект, узнать, как настроить Next.js в статически компиляцию, а затем развернуть этот проект с нашими настраиваниями Vercel.

Шаг 1: Начало работы с следующим. Js ract app.

Чтобы начать работу, мы сначала хотим перейти к каталогу, который мы хотим создать наш проект.

Мы будем использовать стартер для создания нашего проекта. Для этого у нас есть два варианта для менеджера пакета для использования: пряжа или NPM. Вы можете выбрать, в зависимости от того, что вам удобнее на оставшуюся часть прохождения.

yarn create next-app
# or
npx create-next-app

При запуске этой команды Next.js сначала спросит вас имя проекта. Здесь мы можем использовать любое имя, которое мы хотим определить проект. Я собираюсь использовать My-Nextjs-приложение.

После завершения установки мы теперь готовы начать с Next.js.

Перейдите в свой терминал в новый каталог, где находится ваш проект, и запустить:

yarn dev
# or
npm run dev

Это начнет ваш сервер разработки, который сделает ваш новый сайт в размере http://localhost: 3000 Отказ

Если вы открываете свой http://localhost: 3000 Адрес, теперь вы должны увидеть проект Next.js по умолчанию!

Шаг 2: Настройка проекта с Git

Вы захотите настроить этот следующий шаг самостоятельно. Создайте новый репозиторий своим любимым поставщиком Git, который поддерживается Vercel.

На момент написания написания этого, Vercel поддерживает github, gitlab и bitbucket Отказ

Если вы выбираете провайдер в первый раз, Github является солидным вариантом и легко начать.

Затем вы хотите добавить свой проект на этот новый репозиторий и подтолкнуть проект до Git.

Для остальной части этого прохождения я буду ссылаться на Github, но инструкции должны быть одинаковыми для любого поддерживаемого поставщика.

Шаг 3: Развертывание Next.js с vercel

Как только ваш проект будет создан GitHub, перейдите к Vercel.com и войдите в систему.

Если у вас нет учетной записи Vercel, вы должны создать один сейчас. Я бы порекомендовал создать учетную запись с вашей учетной записью GitHub, поскольку оно поможет вам импортировать ваш проект.

Внутри приборной панели VERCEL нажмите Импорт проекта Отказ

Далее при импорте Git Resository нажмите Продолжить Отказ

Vercel теперь попросит УРЛ репозитория. Это будет домашняя страница для репозитория, который вы только что создали для вашего проекта.

После того, как вы нажмете «Продолжить», VERCEL уже обнаружил, что ваш проект использует Next.js. Это означает, что нам не нужно настраивать и настраивать конфигурации, и мы можем ударить развертывание!

На данный момент Vercel будет работать и начать строить новый проект и развернуть его к своей инфраструктуре.

Как только он закончится, он поздравит вас и даст вам ссылку, чтобы посетить ваш сайт.

Нажмите на посещение, и вы будете направлены на ваш проект Live в Интернете:

Что мы просто развернули?

Мы только что создали новое приложение raction с Next.js и развернули его до Vercel.

Мы пройдем по каждому конкретному шагу:

Создать следующее приложение: Сначала мы создали новый проект Next.js на нашем компьютере. Это предоставило нам новое приложение RACT в комплекте с зависимостями и кодом, чтобы начать работу с базовым веб-сайтом.
Добавить проект в Git: Мы добавили наш новый проект Next.js в репозиторий Git, который поддерживается Vercel. Это позволяет нам легко взаимодействовать с проектом с другими услугами, такими как Vercel.
Подключите git to vercel: Мы импортировали наш проект от Git в Vercel. Это позволило Vercel взаимодействовать с нашим кодом.
Создание и развертывание с Vercel: Vercel загрузил наш код, смог распознать это был проект Next.js, построил наш проект и развернул компиляционный вывод на свою инфраструктуру и сделал его доступным в Интернете.

Если вы ждали больше шагов, чтобы получить свой проект в мир, нет ничего! Точка входа для публикации нового проекта RACT в настоящее время ниже, чем когда-либо, и Next.js и Vercel помогают вам добраться туда.

Понимание современного CI/CD с Git

Еще одним преимуществом современных поставщиков инфраструктур, таких как Vercel, заключается в том, что при использовании GitHub в качестве сервисного соединения Vercel может наблюдать за изменениями нашей главной ветви.

Как только Vercel распознает, что изменение было сделано, он будет загружать последний код и повторно запустить тот же процесс, что и в первый раз (помимо любых кэширования и оптимизации).

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

Изменить и просмотреть его автоматически развернуть

Чтобы проверить автоматическое развертывание, давайте внесем изменение нашего проекта.

Внутри нашего проекта давайте внесем изменение некоторых из контента страницы внутри страницы/index.js Отказ Я собираюсь изменить титул в «Проект Colby’s Next.js».


  Colby's Next.js App

Далее выберите это изменение на вашу основную ветвь Git и подтолкните его к GitHub.

Если вы ждете несколько секунд и перейдите к vercel.com Найдите свой проект и нажмите на вкладку развертывания.

Вы увидите, что ваш проект сейчас работает или, возможно, уже закончил, если вы не были достаточно быстрыми. Теперь, если вы снова откроете свой веб-сайт, вы увидите развернутые изменения!

Что мы узнали?

Next.js – это веб-каркас, которая позволяет нам быстро и легко раскрутить новое приложение React.

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

Vercel – это платформа хостинга и развертывания, которая позволяет нам интегрироваться с нашим любимым поддерживаемым поставщиком Git. После подключения VERCEL скачат наш проект, создает наш проект и развертывает вывод в Интернет.

Современные инфраструктурные инструменты, такие как Vercel, будут наблюдать за изменениями на нашем репозитории Git и построят и развернут наш проект, чтобы мы всегда видим последнюю версию.

Узнайте больше о JamStack!

Вы можете узнать больше о JamStack, в том числе 2 более подробному учебникам глубины, с моим справочником JamStack.

Порядок на jamstackandbook.com.

Оригинал: “https://www.freecodecamp.org/news/how-to-build-a-jamstack-site-with-next-js-and-vercel-jamstack-handbook/”