Глава 30. Формы, деплой и финальный проект

Зачем эта глава

Финальная глава соединяет всё вместе: формы, отправку данных, деплой и финальный мини-проект.

Теория (коротко)

В Next.js можно обрабатывать формы через серверные действия (Server Actions) или API.

Для публикации чаще всего используют Vercel или другие хостинги.

JSX
"use client";

export default function ContactForm() {
  return (
    <form>
      <input placeholder="Имя" />
      <button type="submit">Отправить</button>
    </form>
  );
}
Важно: перед деплоем проверь адаптивность, ошибки и скорость загрузки.

Типовые требования клиентов

  • Адаптивность под телефон.
  • Быстрая загрузка.
  • Форма заявки или обратной связи.
  • Понятная структура страниц.

Чек-лист сдачи

  • Все ссылки и кнопки работают.
  • Формы отправляются корректно.
  • Нет «ломающейся» верстки.
  • Есть инструкция для запуска.

Мини-шаблон ТЗ

ТЗ
Цель проекта:
Страницы:
Функции:
Дизайн:
Сроки:
Бюджет:
Критерии сдачи:

Задания

Задание: финальный шаг

  • Собери финальный проект (мини-каталог).
  • Добавь форму обратной связи.
  • Разверни проект на хостинге.

Практика для фриланса

Перед сдачей заказа подготовь: ссылку на деплой, краткую инструкцию, список выполненных задач и список того, что не входит в работу.

Проверка себя

Ты можешь собрать проект целиком и опубликовать его.

Мини-проект

Цель: финальный проект для портфолио.

Требования: главная, каталог, карточка товара, форма заявки.

Критерий готовности: проект работает, выглядит аккуратно и готов для клиента.

Словарь главы

Деплой
Публикация проекта в интернет.
Server Actions
Способ обрабатывать формы на сервере в Next.js.