Опубликуйте веб-приложение 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 минут.