FlipFlag Next.js Demo

Демо-проект для демонстрации интеграции FlipFlag SDK с Next.js версии >14.

🚀 Запуск проекта

Установка зависимостей

cd demo/next
npm install

Запуск в режиме разработки

npm run dev

Приложение будет доступно по адресу: http://localhost:3000

📋 Функциональность

• Отображение Feature Flags: Демонстрирует получение и отображение значений флагов из FlipFlag SDK
• Тёмная/Светлая тема: Переключение между темами интерфейса
• Автоматическое обновление: Флаги обновляются автоматически каждые 20 секунд
• Обработка ошибок: Правильная обработка ошибок загрузки флагов

🛠 Используемые технологии

• Next.js >14 с App Router
• React 18 с хуками
• TypeScript
• FlipFlag SDK - интеграция с сервисом управления флагами

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

demo/next/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Корневой layout
│   │   ├── page.tsx            # Главная страница
│   │   └── globals.css         # Глобальные стили
│   ├── components/
│   │   ├── FlipFlagProvider.tsx    # Провайдер SDK
│   │   └── FeatureFlagsDisplay.tsx # Компонент отображения флагов
│   └── styles/
│       └── Home.module.css     # Стили главной страницы
├── package.json
├── next.config.js
├── tsconfig.json
└── README.md

🔧 Конфигурация FlipFlag SDK

SDK настроен в файле src/components/FlipFlagProvider.tsx:

const config = {
  apiKey: "ff_company_b_admin_0987654321fedcba",
  projectId: "db196a99-adb5-40ad-9e5c-75cfdd8838cf",
  environment: "dev",
  userId: "demo-user-123",
  baseUrl: "https://app.flipflag.ru",
  pullInterval: 20000, // Автоматический pull каждые 20 секунд
  retryAttempts: 3,
};

🎯 Особенности реализации

1. Client Components: Все интерактивные компоненты помечены как 'use client'
2. App Router: Используется новая файловая структура Next.js 13+
3. TypeScript: Полная поддержка типов
4. CSS Modules: Модульные стили для компонентов
5. Responsive Design: Адаптивный дизайн для мобильных устройств

📊 Демонстрируемые флаги

• someflag - основной тестовый флаг
• anotherFlag - дополнительный флаг
• heheflag - третий тестовый флаг

Все флаги загружаются одновременно через один запрос и отображаются в реальном времени.