Первый техстек: что установить и куда нажимать

Заведите аккаунт GitHub

GitHub - это место, где будет лежать код. Не в папке Новая папка 4, не в переписке с нейросетью, а в нормальной истории изменений.

1. Откройте github.com/signup.
2. Введите email, пароль и username. Username лучше сделать коротким и человеческим.
3. Подтвердите email. Без подтверждения дальше будет боль.
4. Если GitHub предлагает включить двухфакторную защиту - включайте. Это код, а не мусорный аккаунт.

Если хочется свериться с официальной инструкцией, вот страница GitHub: Creating an account on GitHub.

Откройте правильный терминал

Терминал - это не хакерская декорация. Это место, где проект запускается. На Windows и macOS названия разные, смысл один.

pwd

Поставьте Git

Git хранит историю проекта. Без Git агент превращается в человека с маркером у стены: написал, испортил, ушел.

git --version

Сразу настройте имя и почту для коммитов:

git config --global user.name "Ваше Имя"
git config --global user.email "you@example.com"

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

Поставьте Cursor

Cursor - это редактор кода. Можно жить в VS Code, но новичку проще начать с Cursor: файлы, терминал и AI рядом, без цирка с расширениями.

1. Откройте cursor.com/download.
2. Скачайте версию для своей системы: Windows или macOS.
3. Установите приложение.
4. Запустите Cursor и войдите в аккаунт, если попросит.

Пока ничего не настраивайте. Не надо превращать первый день в настройку редактора. Мы еще проект не создали.

Поставьте Node.js LTS

Node.js нужен, чтобы запускать Next.js и пакетные менеджеры. На странице Node выбирайте LTS. Не Current. Current - это для людей, которым скучно жить.

1. Откройте nodejs.org/en/download.
2. Выберите LTS-версию для своей операционной системы.
3. Скачайте установщик и пройдите установку.
4. Закройте терминал и откройте заново.

node -v

npm -v

Для актуального Next.js нужен современный Node.js. Документация Next.js указывает минимальную версию Node.js 20.9. Берете LTS - и не думаете об этом лишний раз.

Поставьте pnpm

pnpm - пакетный менеджер. Он будет ставить зависимости и запускать проект. Можно npm, но в этом гайде используем pnpm. Один гайд - один способ.

Сначала попробуйте официальный путь через Corepack:

npm install --global corepack@latest
corepack enable pnpm
pnpm -v

Если появилась версия pnpm - готово. Если не появилась, ставьте напрямую:

npm install -g pnpm@latest-11
pnpm -v

Официальная инструкция pnpm лежит тут: pnpm.io/installation.

Создайте первый Next.js-проект

Теперь делаем проект. Не потом, не после курса по JavaScript. Прямо сейчас. Пустой проект лучше идеального плана.

Создайте приложение:

pnpm create next-app@latest first-vibe-project --yes
cd first-vibe-project
pnpm dev

Откройте http://localhost:3000. Если видите стартовую страницу Next.js - проект живой.

Next.js сам пишет, что команда `pnpm create next-app@latest my-app --yes` создает проект с TypeScript, Tailwind, ESLint, App Router и базовыми настройками. Нам это и надо.

Откройте проект в Cursor

Теперь редактор должен смотреть не в пустоту, а в папку проекта.

1. Откройте Cursor.
2. Нажмите File -> Open Folder.
3. Выберите папку first-vibe-project на рабочем столе.
4. Откройте встроенный терминал: Terminal -> New Terminal.
5. Встроенный терминал должен быть уже внутри папки проекта.

pnpm dev

Сделайте первый коммит

Коммит - это сохранение состояния проекта. Не сделали коммит - не сохранились. Все просто.

git status
git add .
git commit -m "Initial Next.js app"

Если Git ругается на имя или email, вернитесь к шагу 03 и настройте `git config`.

Создайте репозиторий на GitHub и отправьте код

Теперь код надо положить в GitHub. Не через загрузку zip-файла. Через git.

1. Откройте GitHub.
2. Нажмите плюс в правом верхнем углу.
3. Выберите New repository.
4. Название: first-vibe-project.
5. Public или Private - не важно для обучения. Если стесняетесь, ставьте Private.
6. Не добавляйте README. README уже может быть в локальном проекте.
7. Нажмите Create repository.

GitHub показывает похожие шаги в официальном quickstart: Quickstart for repositories.

В терминале проекта выполните команды. Замените USERNAME на свой username:

git branch -M main
git remote add origin https://github.com/USERNAME/first-vibe-project.git
git push -u origin main

Если Git попросит авторизацию - входите через GitHub. На Windows обычно поможет Git Credential Manager. На macOS может открыться браузер или системный prompt. Это нормально.

Подключите Convex, когда понадобятся данные

Если проект просто показывает одну страницу, Convex пока не нужен. Если появляются заявки, посты, пользователи, задачи, счетчики или любой список - нужен backend. Тут берем Convex.

В папке проекта:

pnpm add convex
pnpm convex dev

Convex попросит войти через GitHub, создать проект и добавит папку `convex/`. Официальный quickstart для Next.js: docs.convex.dev/quickstart/nextjs.

Не пытайтесь подключить backend до того, как обычная страница открылась локально. Сначала страница. Потом данные.

Задеплойте на Vercel

Деплой - это момент, когда проект перестает жить только у вас на ноутбуке.

1. Откройте vercel.com/signup.
2. Войдите через GitHub.
3. На dashboard нажмите Add New -> Project или New Project.
4. Выберите репозиторий first-vibe-project.
5. Framework Preset должен быть Next.js. Обычно Vercel угадывает сам.
6. Нажмите Deploy.
7. Дождитесь сборки и откройте выданную ссылку.

Документация Vercel говорит тот же принцип: выбираете Git-репозиторий, настраиваете проект, нажимаете Deploy. Подробно: Vercel Git deployments.

Финальная проверка

В конце должно быть вот так:

• GitHub-аккаунт создан и email подтвержден.
• Git установлен: git --version работает.
• Node.js установлен: node -v работает.
• pnpm установлен: pnpm -v работает.
• Проект создан: папка first-vibe-project есть на компьютере.
• Локальный сервер работает: http://localhost:3000 открывается.
• Cursor открыл папку проекта.
• Первый коммит сделан.
• Код отправлен в GitHub.
• Vercel выдал публичную ссылку.

Если все пункты закрыты - стек готов. Дальше можно просить агента менять страницу, добавлять компоненты, формы и данные. Но теперь у вас есть основа: проект, история, репозиторий и деплой.

Если что-то пошло не так

`pnpm` не найден.

Закройте терминал, откройте заново. Если не помогло, повторите шаг 06.

PowerShell ругается на выполнение скриптов.

Не воюйте с PowerShell в первый день. Используйте установку pnpm через npm: `npm install -g pnpm@latest-11`.

Git не коммитит и просит имя/email.

Выполните `git config --global user.name` и `git config --global user.email` из шага 03.

localhost:3000 не открывается.

Проверьте, что команда `pnpm dev` все еще работает и не закончилась ошибкой.

Vercel build упал.

Сначала запустите `pnpm build` локально. Если падает локально, Vercel не виноват.