Вы открываете страницу, заполняете форму — имя, сообщение, нажимаете «Отправить». Смотрите: данные на экране, всё хорошо. Нажимаете F5 — обновление. Данные исчезли, как будто ничего не было. Чистый бланк, пустое поле. Страница забыла всё, что вы ей говорили.

Это не ошибка — это нормальное поведение обычной веб-страницы. Она живёт только пока открыта, как разговор по телефону: положил трубку — разговор кончился, слова нигде не записаны. Чтобы страница помнила — нужно отдельное место для хранения. В мире веб-разработки это место называется база данных. В нашей карте дома из Урока 1 — это кладовка.

Сегодня добавим кладовку к нашему проекту и научим форму туда писать.

Где мы сейчас

Часть 1. Почему страница ничего не помнит

Когда вы открываете любую страницу в браузере — браузер скачивает с сервера набор файлов: текст, картинки, скрипты. Показывает их вам. Всё, что происходит после — живёт только в вашем браузере, в оперативной памяти вашего компьютера. Когда вы нажимаете F5 — браузер скачивает файлы заново, с чистого листа. То, что вы вписали в форму, нигде не сохранялось — оно было только в памяти, которую браузер вычистил при перезагрузке.

Это не недостаток — это осознанное устройство. Страница по умолчанию stateless, то есть без состояния: каждый визит начинается с нуля. Именно поэтому, кстати, формы на обычных сайтах иногда «сбрасываются», если случайно нажать «Назад» в браузере. Всё понятно: данные нигде не лежали.

Часть 2. Что такое база данных — кладовка с полками

В Уроке 1 мы дали базе данных короткое определение: кладовка. Теперь раскроем его подробнее — ровно настолько, чтобы уверенно разговаривать с Claude Code.

База данных — это программа, которая живёт на сервере и умеет одно главное: надёжно хранить данные и быстро их находить. Не в файле (файл можно потерять, перезаписать, он не рассчитан на одновременный доступ от многих людей) — а в структуре, где у каждой информации есть своё место и адрес.

Внутри база устроена как таблица — или много таблиц. Таблица = полка. На ней хранятся записи одного типа: например, все сообщения из гостевой книги. Строка в таблице = одна запись: одно сообщение, с именем автора, текстом и датой. Вот и вся структура, которую нужно знать для нашего проекта.

Конкретно для нашей гостевой книги таблица будет выглядеть примерно так:

Четыре колонки. Каждая строка — одно сообщение. Добавили новое — появилась четвёртая строка. Обновили страницу — строки никуда не делись: они в кладовке, а не в браузере.

Часть 3. Какую базу берём и почему бесплатно

Мы используем PostgreSQL (или просто Postgres) — надёжную базу данных с открытым кодом, которой больше тридцати лет [1]. Не потому что это единственный вариант — а потому что Vercel, наш будущий хостинг (подробнее — в Уроке 7), предлагает её бесплатно через встроенный магазин.

Бесплатный тариф Neon включает 0,5 ГБ хранения и достаточно вычислительных ресурсов для пет-проекта [2]. Для гостевой книги этого хватит с запасом: тысяча сообщений занимает примерно несколько мегабайт.

Часть 4. Подключаем базу: вы — заказчик, Claude Code — строитель

Весь технический процесс подключения базы Claude Code делает сам. Ваша работа — сказать ему что нужно и в какой последовательности. Вот как выглядит разговор прораба со строителем.

# Что вы говорите Claude Code (своими словами):
У меня подключена база данных Postgres через Vercel Marketplace (Neon).
Переменная подключения уже есть в окружении.
Добавь гостевую книгу: таблицу messages с полями
name, message и created_at.
Сделай форму на главной странице — имя и сообщение.
После отправки форма должна сохранять запись в базу.
Под формой покажи все сохранённые сообщения, от новых к старым.
Проверь локально, что всё работает.

Claude Code знает Next.js [3] и Postgres — он сам напишет код, создаст таблицу и подключит форму. Вы смотрите на результат в браузере, пишете сообщение, обновляете страницу — сообщение остаётся. Кладовка работает.

Часть 5. Путь данных: форма → сервер → база → экран

Давайте пройдём этот путь шаг за шагом — медленно, чтобы каждый шаг стал понятным. Ничего нового не добавляется: только то, что уже знаете, составленное вместе.

Заметьте: браузер не разговаривает с базой напрямую. Он разговаривает с сервером, а сервер — с базой. Это сделано специально: так база защищена, к ней нет прямого доступа снаружи. Сервер — посредник, он проверяет, что запрос корректный, и только тогда идёт в кладовку.

Часть 6. Виджет: проверьте, что поняли поток данных

Теперь сложите схему самостоятельно. Ниже — виджет: перетащите шаги в правильном порядке. Это не тест на скорость — подумайте перед тем, как расставлять.

Резюме