Опубликуйте веб-приложение Next.js за 8 простых шагов!

Первое, чему я научился как инженер-программист, — это держать вещи в поцелуях, милой и запоминающейся аббревиатуре от Keep It Simple Stupid!

За те годы, что я блуждал в мире стартапов, эта фраза часто ускользала из моей памяти, скрываясь где-то под всей причудливой чепухой новых технологий и, конечно же, технических терминов. Они всегда идут рука об руку.

Итак, в этот прекрасный и яркий солнечный день я покажу вам, как вы можете развернуть свой собственный милый, милый веб-сайт за 8 простых шагов для защиты от идиотов.

Шаг 1

Откройте терминал и скопируйте и вставьте эту строку.

yarn create next-app --typescript

Вы спросите, почему машинопись? потому что все крутые коты используют его, и это достаточная причина (если вы мне не верите, не стесняйтесь спросить об этом дядю Google).

Шаг 2

Он попросит вас ввести название вашего проекта, назовите его whatever-project.

Подождите, пока он сделает свое дело, и запустите эту линию прямо здесь.

cd whatever-project && yarn dev

ваш терминал покажет что-то вроде этого.

Шаг 3

Откройте браузер и нажмите http://localhost:3000/.

Поздравляем! Вы запустили свое первое приложение Next.js локально за 3 шага! Вздох. Это всегда немного убивает мою душу, когда я не вижу Hello, world! в свежем приложении.

Шаг 4

Я предполагаю, что у вас уже есть учетная запись Github и вы знаете свое имя пользователя Github, вы можете создать новый репозиторий в https://github.com/new и запустить эти строки в своем терминале.

git remote add origin [email protected]:your-username/whatever-project.git

git push -u origin main

Шаг 5

Создайте учетную запись Vercel, здесь вы опубликуете свое приложение, чтобы его увидел весь мир!

Перейдите на https://vercel.com/new в своем браузере, вы можете выполнить шаги, чтобы подключить свою учетную запись Github.

Вы должны увидеть список ваших репозиториев, найдите тот, который говорит whatever-project, и нажмите кнопку Импорт!

Шаг 6

Щелкните Развернуть.

Шаг 7

Вы успешно развернули свое приложение Next.js! Поздравляем еще раз!

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

Шаг 8

CI/CD также предварительно упакован в аккуратную маленькую праздничную подарочную коробку, если вы публикуете свое приложение через Vercel.

Краткое объяснение: CI/CD расшифровывается как Continuous Integration / Continuous Delivery / Continuous Deployment, что в основном означает, что вы можете опубликовать изменения в своем коде за 15 секунд усилий или даже меньше, если вы амбициозны. .

Все, что вам нужно сделать, если вы хотите развернуть свои изменения, выполнить эти шаги.

git add .

git commit -m 'your commit message'

git push -u origin main

Вуаля, готово! :)

Теперь вы можете похвастаться перед коллегами тем, что создали веб-приложение Next.js и развернули его с помощью CI/CD за 15 минут.