https://github.com/kudzeri/next-x-course
Современная имплементация социальной сети в стиле X (Twitter), созданная с использованием Next.js 15, TypeScript и Tailwind CSS.
https://github.com/kudzeri/next-x-course
next15 nextjs tailwindcss typescript x-clone
Last synced: 3 months ago
JSON representation
Современная имплементация социальной сети в стиле X (Twitter), созданная с использованием Next.js 15, TypeScript и Tailwind CSS.
- Host: GitHub
- URL: https://github.com/kudzeri/next-x-course
- Owner: Kudzeri
- Created: 2025-06-27T15:02:44.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2025-06-27T16:02:57.000Z (4 months ago)
- Last Synced: 2025-06-27T16:24:30.083Z (4 months ago)
- Topics: next15, nextjs, tailwindcss, typescript, x-clone
- Language: TypeScript
- Homepage: https://next-x-course.onrender.com
- Size: 92.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# X/Twitter Clone
Полнофункциональная современная социальная сеть в стиле X (Twitter) с интегрированным интернет-магазином, демонстрирующая различные методы рендеринга Next.js.
## 🚀 Особенности
- ✨ **Современный стек**: Next.js 15, React 19, TypeScript 5
- 🎨 **Стилизация**: Tailwind CSS 4 для современного дизайна
- 📱 **Отзывчивый дизайн**: Адаптивная верстка для всех устройств
- 🔗 **Маршрутизация**: App Router с группированными маршрутами
- 🖼️ **Оптимизация изображений**: Next.js Image component
- 🌙 **Темная тема**: Элегантная темная тема по умолчанию
- 🛒 **Интернет-магазин**: Демонстрация SSR, SSG и ISR
- 🔐 **Middleware**: Система аутентификации и защиты маршрутов
- 🎯 **Server Actions**: Серверные действия для отправки твитов
- 🧩 **Компонентная архитектура**: Переиспользуемые UI компоненты
## 📁 Структура проекта
```
src/
├── app/ # App Router (Next.js 13+)
│ ├── (public)/ # Публичные страницы
│ │ ├── (home)/ # Главная страница с лентой твитов
│ │ ├── explore/ # Страница исследования
│ │ ├── profile-fake/ # Защищенная страница профиля
│ │ ├── shop/ # Интернет-магазин
│ │ │ ├── ssg/ # Static Site Generation
│ │ │ └── isr/ # Incremental Static Regeneration
│ │ └── u/[username]/ # Динамические профили пользователей
│ ├── lib/ # API функции
│ ├── layout.tsx # Корневой layout
│ └── globals.css # Глобальные стили
├── components/ # Переиспользуемые компоненты
│ ├── Header.tsx # Навигационный header
│ ├── Menu.tsx # Динамическое меню навигации
│ └── MenuItem.tsx # Элемент меню
├── config/ # Конфигурация
│ ├── pages.config.ts # Конфигурация страниц
│ └── pages.class.ts # Классы страниц
├── data/ # Данные приложения
│ ├── tweets.data.ts # Моковые данные твитов
│ └── menu.data.ts # Конфигурация меню
├── server-actions/ # Server Actions
│ └── post-tweet.ts # Действие отправки твитов
├── shared/
│ └── types/ # TypeScript типы
│ ├── tweet.interface.ts
│ ├── product.type.ts
│ ├── menu-item.interface.ts
│ ├── review.type.ts
│ ├── meta.type.ts
│ └── dimension.type.ts
├── middleware.ts # Next.js middleware
└── constants.ts # Глобальные константы
```
## 🛠️ Технологии
- **Framework**: Next.js 15.3.4
- **Language**: TypeScript 5
- **Styling**: Tailwind CSS 4
- **React**: React 19
- **Navigation**: path-to-regexp для роутинга
- **API**: DummyJSON для демо-данных
- **Linting**: ESLint 9 с Next.js конфигурацией
## 🚀 Начало работы
1. **Установка зависимостей**:
```bash
npm install
```
2. **Запуск сервера разработки**:
```bash
npm run dev
```
3. **Откройте в браузере**: [http://localhost:3000](http://localhost:3000)
## 📜 Доступные скрипты
- `npm run dev` - Запуск в режиме разработки
- `npm run build` - Сборка для production
- `npm run start` - Запуск production сервера
- `npm run lint` - Проверка кода ESLint
## 🏗️ Функциональность
### 🏠 Главная страница (`/`)
- Лента твитов с данными из моков
- Форма для создания новых твитов (Server Actions)
- Отображение авторов и текста твитов
- Ссылки на профили пользователей
### 🔍 Страница исследования (`/explore`)
- Исследование контента и пользователей
- Компоненты с Suspense для оптимизации загрузки
### 👤 Профили пользователей
- Динамические маршруты `/u/[username]`
- Защищенная страница профиля `/profile-fake` с middleware
### 🛒 Интернет-магазин
Демонстрация различных методов рендеринга Next.js:
#### **SSR (Server-Side Rendering)** `/shop`
- Рендеринг на сервере при каждом запросе
- `cache: "no-store"` для свежих данных
- Карточки товаров с изображениями и ценами
#### **SSG (Static Site Generation)** `/shop/ssg`
- Статическая генерация на этапе сборки
- Максимальная производительность
- Предварительно сгенерированные страницы
#### **ISR (Incremental Static Regeneration)** `/shop/isr`
- Переодическое обновление статических страниц
- `revalidate: 300` (5 минут)
- Баланс между производительностью и свежестью данных
### 🔐 Middleware и аутентификация
- Защита маршрутов `/profile-fake/*`
- Проверка токенов в cookies
- Автоматическое перенаправление на главную
### 📝 Server Actions
- Обработка форм на сервере
- Отправка твитов без JavaScript на клиенте
- Современный подход к серверной логике
## 🧩 Компоненты
### Основные компоненты
- `Tweet` - Отображение отдельного твита
- `TweetForm` - Форма создания твитов с Server Actions
- `Header` - Навигационная панель с логотипом X
- `Menu` - Динамическое меню с активными состояниями
- `MenuItem` - Элемент меню с подсветкой активной страницы
- `ProductCard` - Карточка товара в магазине
### Типизация
Полная типизация с TypeScript:
- `ITweet` - Интерфейс твитов
- `Product` - Сложный тип товаров с вложенными объектами
- `IMenuItem` - Интерфейс элементов меню
- `Review`, `Meta`, `Dimensions` - Вспомогательные типы
## 🎨 Дизайн
Приложение использует современную темную тему с:
- Черный фон (`bg-black`)
- Белый текст с прозрачностью
- Границы с низкой прозрачностью (`border-white/10`)
- Логотип X в качестве брендинга
- Адаптивная сетка для товаров
- Hover-эффекты для интерактивности
## 🔧 Архитектурные решения
### Группированные маршруты
- `(public)` - группа публичных страниц
- `(home)` - группировка главной страницы
- Чистая структура URL без влияния на роутинг
### Конфигурационный подход
- Централизованная конфигурация страниц
- Типизированные константы
- Легкая масштабируемость
### API Integration
- Интеграция с DummyJSON API
- Различные стратегии кеширования
- Типизированные API ответы
## 📈 Производительность
- **SSG**: Максимальная скорость для статического контента
- **ISR**: Баланс между скоростью и свежестью данных
- **SSR**: Свежие данные при каждом запросе
- **Image Optimization**: Автоматическая оптимизация изображений
- **Code Splitting**: Автоматическое разделение кода Next.js
## 🔒 Безопасность
- Middleware для защиты приватных маршрутов
- Валидация на сервере через Server Actions
- Типизированные параметры форм
- Безопасное хранение токенов в cookies
## 📝 Следующие шаги
- [ ] Полная система аутентификации с JWT
- [ ] База данных для хранения твитов и пользователей
- [ ] Система лайков и ретвитов
- [ ] Загрузка изображений в твиты
- [ ] Real-time обновления с WebSocket
- [ ] Корзина покупок в интернет-магазине
- [ ] Система оплаты
- [ ] Уведомления и подписки
- [ ] Поиск по твитам и пользователям
- [ ] Темная/светлая тема переключатель
## 🚀 Развертывание
Рекомендуется развертывать на [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) для оптимальной производительности Next.js приложений.
### Переменные окружения
```env
# API URL для внешних данных
API_URL=https://dummyjson.com/
```