Настройка контактной формы: Resend, Vercel и GoDaddy пошагово

Fastry поставляется с полностью работающей контактной формой — валидация, защита от спама (honeypot), обработка ошибок и всё остальное. Единственное, что не включено — это аккаунт почтового сервиса, потому что он принадлежит вам. Для того чтобы форма действительно доставляла письма, нужны три внешних компонента: аккаунт Resend, подтверждённый домен отправителя и одна переменная окружения на Vercel.

Resend — это ориентированный на разработчиков сервис доставки email. Вы отправляете письма через их API, а они занимаются инфраструктурой — доставляемостью, аутентификацией и репутацией отправителя.

Vercel — это хостинговая платформа, на которой работает этот сайт.

Что нужно перед началом

• Аккаунт Resend (бесплатного тарифа достаточно)
• Доступ к DNS-настройкам вашего домена
• Доступ к переменным окружения вашего проекта на Vercel

Шаг 1 — Создайте аккаунт Resend

Перейдите на resend.com и зарегистрируйтесь. Бесплатный тариф позволяет отправлять 3 000 писем в месяц и 100 в день — более чем достаточно для контактной формы.

Шаг 2 — Подтвердите домен в Resend

1. В Resend перейдите в Domains → Add Domain
2. Введите yourdomain.com и нажмите Add
3. Resend покажет набор DNS-записей для добавления — SPF, DKIM CNAME и опционально DMARC

Добавьте эти записи в настройках DNS вашего домена. После добавления вернитесь в Resend и нажмите Verify DNS Records.

Шаг 3 — Создайте API-ключ

1. В Resend перейдите в API Keys → Create API Key
2. Дайте ему имя и выберите разрешение Sending access
3. Скопируйте ключ сразу — Resend показывает его только один раз

Шаг 4 — Добавьте API-ключ в Vercel

1. В Vercel откройте проект и перейдите в Settings → Environment Variables
2. Добавьте переменную:
   • Name: RESEND_API_KEY
   • Value: скопированный ключ
3. Нажмите Save

Шаг 5 — Передеплойте проект

Изменения переменных окружения вступают в силу только после нового деплоя. Запустите повторный деплой в Vercel.

Шаг 6 — Протестируйте

Откройте ваш сайт, заполните контактную форму и отправьте. В течение нескольких секунд вы должны получить сообщение на ваш почтовый ящик.

Какие файлы Fastry нужно обновить

1. src/pages/api/contact.ts

Единственный файл с жёстко заданными email-адресами. Замените yourdomain.com на ваш реальный домен и you@gmail.com на адрес, куда хотите получать сообщения.

2. .env (локально) или переменные окружения Vercel (продакшн)

API-ключ никогда не хранится в исходном коде. Для локальной разработки добавьте его в .env:

RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxx

Для продакшна добавьте как переменную окружения в настройках проекта Vercel.