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

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

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

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

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

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

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

pwd

03Поставь Git

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

git --version

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

git config --global user.name "Твое Имя"
git config --global user.email "you@example.com"

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

04Поставь Cursor

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

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

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

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

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

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

node -v

npm -v

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

06Поставь 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.

07Создай первый 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 и базовыми настройками. Нам это и надо.

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

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

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

pnpm dev

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

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

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

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

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

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

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

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

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

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

pnpm add convex
pnpm convex dev

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

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

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

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

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

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

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

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

• □ 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 не виноват.