# Создание Novacom: Современная витрина веб-разработки

Сайт Novacom — это не просто портфолио, а живое демонстрационное пособие современных практик веб-разработки. Созданный с использованием передовых технологий и оптимизированный для производительности, SEO и пользовательского опыта.

Наш стек технологий

Основной фреймворк: Next.js 15

Мы используем последнюю версию Next.js 15 с App Router, которая включает:

• React 19 с серверными компонентами
• TypeScript для обеспечения типобезопасности
• ISR (Инкрементальная статическая регенерация) для оптимальной производительности
• Edge Runtime для динамического контента

Управление контентом: Contentlayer2

Наш блог использует Contentlayer2 для управления контентом с типобезопасностью:

export const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: `**/*.mdx`,
  fields: {
    title: { type: 'string', required: true },
    description: { type: 'string', required: true },
    slug: { type: 'string', required: true },
    date: { type: 'date', required: true },
    lang: { type: 'string', required: true },
    tags: { type: 'list', of: { type: 'string' }, required: true },
    cover: { type: 'string', required: true },
    author: { type: 'string', required: true },
    readingTime: { type: 'number', required: true },
    noindex: { type: 'boolean', required: false, default: false },
  },
  computedFields: {
    url: { type: 'string', resolve: (doc) => `/blog/${doc.slug}` },
    localeUrl: { type: 'string', resolve: (doc) => `/${doc.lang}/blog/${doc.slug}` },
  },
}))

Интернационализация (i18n)

Интеграция next-intl

Мы реализовали комплексную интернационализацию с помощью next-intl:

• Автоматическое определение локали на основе предпочтений браузера
• SEO-дружественные URL с префиксами локали (/en/, /de/)
• Сохранение локали на основе куки
• Оптимизация для Googlebot с правильными редиректами

Реализация Middleware

Наше пользовательское middleware обрабатывает:

// Умное определение локали и редирект
const detectedLocale = preferredLanguages
  .map(lang => lang.split('-')[0])
  .find(lang => VALID_LOCALES.includes(lang)) || DEFAULT_LOCALE

// SEO-оптимизированные редиректы
if (pathname === '/') {
  statusCode = 301 // Постоянный редирект для SEO
}

Оптимизация производительности

Оптимизация изображений

• Форматы WebP/AVIF с автоматическими запасными вариантами
• Компонент изображений Next.js с адаптивными размерами
• Поддержка SVG с политиками безопасности
• Ленивая загрузка для контента ниже видимой области

Оптимизация пакетов

// Конфигурация Next.js
const nextConfig = {
  compiler: {
    removeConsole: process.env.NODE_ENV === "production",
  },
  images: {
    formats: ['image/webp', 'image/avif'],
    dangerouslyAllowSVG: true,
    contentDispositionType: 'attachment',
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
  },
  experimental: {
    mdxRs: true, // Обработка MDX на основе Rust
  },
}

Превосходство в SEO

Динамические OG-изображения

Мы генерируем динамические изображения Open Graph с использованием @vercel/og:

const ogImageUrl = `${siteUrl}/api/og?title=${encodeURIComponent(title)}&description=${encodeURIComponent(description)}&author=${encodeURIComponent(author || 'Novacom Team')}`

Структурированные данные

Комплексная реализация JSON-LD:

• Схема статьи для блог-постов
• Схема хлебных крошек для навигации
• Схема организации для информации о компании
• BreadcrumbList для лучшего понимания поиска

Генерация карты сайта

Автоматическая карта сайта с помощью next-sitemap:

• Поддержка hreflang для международного SEO
• Динамическое включение блог-постов
• Генерация страниц тегов
• Оптимизация приоритета и частоты изменений

Превосходство в UI/UX

Tailwind CSS

Пользовательская система дизайна с:

• Поддержкой темной темы (darkMode: "class")
• Пользовательской цветовой палитрой
• Адаптивными шаблонами дизайна
• Стилизацией на основе компонентов

Framer Motion

Плавные анимации и переходы:

• Переходы между страницами
• Анимации при прокрутке
• Микровзаимодействия
• Оптимизированные для производительности анимации

Расширенные функции

Плавная прокрутка с Lenis

Мы реализовали Lenis для плавной прокрутки:

• Прокрутка на основе инерции для естественного ощущения
• Плавная прокрутка к секциям с встроенными якорями
• Оптимизация производительности с помощью requestAnimationFrame
• Поддержка доступности для предпочтений уменьшенной анимации

Формы подписки и обратной связи

Обработка форм в реальном времени с нашим пользовательским API:

• Безсерверные API-маршруты для отправки форм
• Уведомления по электронной почте с отформатированными шаблонами
• Интеграция новостной рассылки для вовлечения пользователей
• Защита от спама и валидация

Аналитика и отслеживание

Аналитика с акцентом на конфиденциальность:

• Интеграция Google Analytics для получения аналитики
• Отслеживание параметров UTM для атрибуции кампаний
• Отслеживание пользовательских событий для взаимодействий
• Баннер с куки для соблюдения GDPR

Опыт разработки

Конфигурация TypeScript

Комплексная типобезопасность:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "contentlayer/generated": ["./.contentlayer/generated"]
    }
  }
}

Качество кода

• ESLint с конфигурацией Next.js
• Prettier с плагином Tailwind
• Строгий режим TypeScript
• Организация импортов

Развертывание и мониторинг

Интеграция с Vercel

• Автоматические развертывания из Git
• Edge-функции для глобальной производительности
• Интеграция аналитики
• Мониторинг производительности

Оптимизация сборки

{
  "scripts": {
    "build": "prisma generate && next build && next-sitemap",
    "postbuild": "next-sitemap"
  }
}

Почему эта архитектура важна

Для разработчиков

• Типобезопасность снижает количество ошибок и улучшает поддерживаемость
• Современные инструменты повышают продуктивность
• Повторное использование компонентов ускоряет разработку
• Горячая перезагрузка для мгновенной обратной связи

Для пользователей

• Молниеносная загрузка с использованием статической генерации
• Плавные анимации улучшают пользовательский опыт
• Адаптивный дизайн работает на всех устройствах
• Доступность обеспечивает инклюзивный дизайн

Для бизнеса

• Оптимизация SEO привлекает органический трафик
• Производительность улучшает коэффициенты конверсии
• Интернационализация расширяет рынок
• Масштабируемость поддерживает будущий рост

Результат

Сайт Novacom демонстрирует, что возможно с современными веб-технологиями:

• Идеальные показатели Core Web Vitals
• 100% рейтинг производительности Lighthouse
• Оптимизация для SEO для максимальной видимости
• Доступность для всех пользователей
• Масштабируемая архитектура для будущего роста

---

Этот сайт демонстрирует нашу приверженность к совершенству в веб-разработке. Каждая строка кода, каждое дизайнерское решение и каждая оптимизация отражают нашу экспертизу и внимание к деталям.