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

Заведите аккаунт 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. Не надо усложнять раньше времени.

Поставьте VS Code и ИИ-агента

VS Code — это редактор кода. Он бесплатный, работает на Windows, macOS и Linux, а Cursor сам построен на нём. Файлы, терминал и агент живут в одном окне. Чем ещё заменить Cursor из РФ, собрано в подборке альтернатив.

Разница между подсказками и самостоятельной работой агента описана в карте терминов программирования с ИИ.

1. Откройте code.visualstudio.com/download.
2. Скачайте версию для своей системы: Windows или macOS.
3. Установите приложение и запустите его.

Какого агента взять из РФ. Агент — программа, которая пишет код по вашей задаче. Выбирайте его по тому, есть ли у вас зарубежная карта. Кто сейчас впереди, видно в рейтинге ИИ-агентов.

• Claude Code или Codex. Оба сервиса в РФ официально недоступны, поэтому сначала поменяйте российский IP-адрес на иностранный, а подписку оплатите зарубежной картой. Claude Code входит в Claude Pro за $20 в месяц, Codex входит в ChatGPT Plus за те же $20. Бесплатный вход есть только у Codex: младшую модель GPT-6 Luna в десктоп-приложении OpenAI открывает бесплатным аккаунтам постепенно.
• OpenCode — открытый агент в терминале. Сам он бесплатный и ставится из РФ, в комплекте есть бесплатные модели, их список меняется. Какие доступны сейчас, собрано в гайде по бесплатным нейросетям для кода. Сильную модель подключаете свою: подписку ChatGPT, ключ провайдера или локальную.
• Российский агент, если зарубежной карты нет. Koda работает из РФ без смены IP и берёт оплату в рублях. Ставится плагином в VS Code, есть бесплатный тариф, платные стоят от 1 590 ₽ в месяц. Полный список с ценами лежит в обзоре российских ИИ-агентов.

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

Поставьте 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 на 18 октября 2026 года — Node.js 24. Берете LTS и не думаете об этом лишний раз.

Поставьте pnpm

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

Ставьте официальным установщиком через npm, он пришел вместе с Node.js:

npx get-pnpm
pnpm -v

Появилась версия pnpm, значит готово. Сейчас это pnpm 12. Установщику нужен Node.js 22.13 или новее, LTS из шага 05 подходит.

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

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

Теперь делаем проект. Не потом, не после курса по JavaScript. Прямо сейчас. Пустой проект лучше идеального плана. Для своего продукта можно выбрать идею из каталога IT-бизнеса.

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

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 и Turbopack. Заодно она кладет в проект файл AGENTS.md: это памятка ИИ-агенту, как писать код под свежий Next.js. Нам это и надо.

Откройте проект в VS Code

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

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

pnpm dev

Теперь запустите агента в этой папке так, как сказано в его карточке. Дайте ему простую задачу, например «поменяй заголовок стартовой страницы на моё имя». Обновите localhost и проверьте, что заголовок поменялся.

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

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

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 открывается.
• VS Code открыл папку проекта.
• Агент установлен и поменял заголовок страницы.
• Первый коммит сделан.
• Код отправлен в GitHub.
• Vercel выдал публичную ссылку.

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

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

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

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

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

Не воюйте с PowerShell в первый день. Запустите установщик через cmd-версию команды: `npx.cmd get-pnpm`.

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

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

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

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

Vercel build упал.

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