LabNetHub — сайт компании

Сайт на Next.js 14 (App Router) + TypeScript + Tailwind CSS для компании LabNetHub: разработка сайтов, ботов для соцсетей, настройка CRM, хостинг и IT-поддержка.

Быстрый старт

npm install
cp .env.local.example .env.local   # заполните реальными значениями
npm run dev

Сайт откроется на http://localhost:3000

Сборка для продакшена:

npm run build
npm run start

Структура проекта

app/                 — страницы (App Router)
  page.tsx           — Главная
  websites/          — Сайты
  bots/              — Боты
  crm/               — CRM
  hosting/           — Хостинг и серверы
  support/           — IT-поддержка
  contacts/          — Контакты
  api/contact/       — API-роут формы обратной связи (→ Telegram)
components/          — переиспользуемые компоненты (Header, Footer, карточки и т.д.)
config/
  contacts.ts        — все контакты и ссылки на соцсети в одном месте
  services.ts         — данные для карточек услуг и навигации

Что нужно заполнить перед публикацией

1. Контакты — откройте config/contacts.ts и замените placeholder-ссылки на реальные: Telegram, VK, WhatsApp, email, город.

2. Telegram-уведомления формы — в .env.local укажите:

   • TELEGRAM_BOT_TOKEN — токен бота, полученный у @BotFather
   • TELEGRAM_CHAT_ID — ID чата/канала для приёма заявок. Узнать свой ID можно, написав боту @userinfobot, либо через метод getUpdates вашего бота.

3. Домен — в app/layout.tsx поле metadataBase укажите на ваш реальный домен.

Форма обратной связи

Форма на странице /contacts отправляет данные на POST /api/contact. Роут проверяет обязательные поля, убирает HTML-теги (защита от инъекций), экранирует спецсимволы Markdown и пересылает сообщение в Telegram через Bot API. В форме также есть скрытое honeypot-поле для защиты от простых ботов.

Безопасность

В next.config.mjs включены базовые защитные HTTP-заголовки: Strict-Transport-Security, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy.

Рекомендации для сервера при деплое:

• Раздавайте сайт только по HTTPS (например, сертификат Let's Encrypt через certbot).
• На уровне nginx настройте limit_req для /api/contact, чтобы ограничить количество запросов от одного адреса в минуту.
• Храните .env.local вне репозитория — файл уже добавлен в .gitignore.
• Регулярно обновляйте зависимости (npm outdated / npm audit).

Деплой на свой сервер (LabNetHub VDS/VPS)

Пример запуска через PM2 за nginx как обратным прокси:

npm run build
pm2 start npm --name labnethub -- start

В конфиге nginx проксируйте запросы на http://127.0.0.1:3000 и подключите SSL-сертификат. При желании сайт также можно собрать в статику (output: "export" в next.config.mjs) — тогда /api/contact работать не будет, и форму нужно будет переключить на внешний сервис отправки писем.

Цветовая тема

Токены дизайна заданы в tailwind.config.ts:

• base — тёмно-синий фон (base.950 — основной фон страницы)
• blue — основной акцент бренда
• green — акцент раздела «Хостинг и серверы»
• ink — оттенки текста

Шрифты (Unbounded, Manrope, JetBrains Mono) подключены через next/font/google в app/layout.tsx — при сборке скачиваются один раз и дальше работают без обращений к Google Fonts во время выполнения.