PathVoyager

Путеводитель по путешествиям на Next.js с админ-панелью для управления статьями. Современный travel blog с адаптивным дизайном, SEO-оптимизацией и системой управления контентом.

Особенности

• 🎨 Адаптивный дизайн — полная поддержка мобильных устройств и планшетов
• 📱 Мобильное меню — удобная навигация на всех устройствах
• 🔍 SEO-оптимизация — мета-теги, Open Graph, Twitter Cards, JSON-LD
• 📝 Админ-панель — создание и управление статьями через веб-интерфейс
• 🗄️ MySQL — надежное хранение данных
• 🎯 Категории — организация статей по темам (Digital Nomad, Adventure, Luxury Travel и др.)
• 📄 Пагинация — удобная навигация по статьям
• 🎨 Tailwind CSS — современная стилизация

Как запустить

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

npm install

2. Настройка базы данных MySQL

Убедитесь, что MySQL установлен и запущен. База данных должна быть создана заранее (через ISPmanager или вручную).

Настройте переменные окружения. Создайте файл .env в корне проекта:

# Подключение к MySQL
# Если используете DATABASE_URL:
# DATABASE_URL=mysql://user:password@localhost:3306/database_name

# Или используйте отдельные переменные:
DB_HOST=localhost
DB_PORT=3306
DB_USER=your_database_user
DB_PASSWORD=your_database_password
DB_NAME=your_database_name

# Альтернативные переменные (также поддерживаются):
# MYSQL_HOST=localhost
# MYSQL_PORT=3306
# MYSQL_USER=your_database_user
# MYSQL_PASSWORD=your_database_password
# MYSQL_DATABASE=your_database_name

# Директория для загруженных изображений (опционально)
# UPLOADS_DIR=/path/to/uploads/directory

# Опционально: переопределить базовый URL API на клиенте
# По умолчанию используется тот же домен, что и фронтенд
# NEXT_PUBLIC_API_BASE_URL=https://yourdomain.com

Примечание: Таблица articles будет создана автоматически при первом запуске сервера.

3. Запуск приложения (фронт + API)

Next.js теперь включает API-роуты, поэтому достаточно одного процесса:

npm run dev

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

5. Использование админ-панели

Откройте http://localhost:3000/admin для создания и управления статьями.

Формат контента:

• # Заголовок — создает заголовок блока
• - пункт списка — создает элемент списка
• > Цитата — Автор — создает цитату с автором
• [[banner]] — вставляет баннер в текст
• Обычный текст — создает параграф

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

Проект использует архитектуру Feature-Sliced Design (FSD):

• src/app/ — страницы Next.js (App Router)
  • / — главная страница
  • /about — страница "О нас"
  • /categories — страница категорий
  • /travel — блог со всеми статьями и фильтрацией
  • /posts/[slug] — детальная страница статьи
  • /privacy — политика конфиденциальности
  • /disclaimer — отказ от ответственности
  • /admin — админ-панель
• src/widgets/ — виджеты (header, footer, секции)
• src/entities/ — сущности (посты, категории, авторы)
• src/shared/ — общие компоненты, утилиты, иконки
• src/server/ — серверные утилиты (подключение к MySQL, сохранение загрузок)
• public/ — статические файлы (изображения)

Страницы и функциональность

Главная страница (/)

• Hero-секция с фоновым изображением
• Популярные статьи (8 статей с баннерами)
• Недавние статьи (5 статей с баннерами)

Страница "О нас" (/about)

• Информация о команде авторов
• Карточки авторов с биографиями
• Недавние статьи

Страница категорий (/categories)

• Детальное описание каждой категории
• Баннеры для рекламы
• Адаптивная верстка

Travel Blog (/travel)

• Все статьи с фильтрацией по категориям
• Пагинация (8 статей на страницу)
• Баннеры в случайных позициях
• Поиск и фильтрация

Детальная страница статьи (/posts/[slug])

• Полный контент статьи
• Метаданные (дата, время чтения, автор)
• Баннеры внутри контента
• SEO-оптимизация

Админ-панель (/admin)

• Авторизация
• Создание и редактирование статей
• Просмотр списка статей
• Удаление статей

API Endpoints

• GET /api/articles — получить список всех статей
• GET /api/articles/:slug — получить статью по слагу
• POST /api/articles — создать/обновить статью (upsert по слагу)
• DELETE /api/articles/:slug — удалить статью
• POST /api/upload — загрузить изображение и получить относительный URL
• GET /health — проверка здоровья сервера

SEO

Проект включает полную SEO-оптимизацию:

• Мета-теги для всех страниц
• Open Graph теги
• Twitter Cards
• JSON-LD структурированные данные (Organization, WebSite, Article, AboutPage)
• Sitemap и robots.txt
• Канонические URL

Скрипты

• npm run dev — запуск Next.js в режиме разработки
• npm run build — сборка Next.js приложения
• npm run start — запуск production-версии Next.js
• npm run lint — проверка кода линтером

Технологии

• Frontend:

  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Next.js Image Optimization

• Backend:

  • Next.js API Routes (Node runtime)
  • MySQL (mysql2)

• Архитектура:

  • Feature-Sliced Design (FSD)

Деплой на ISPmanager

Подробная инструкция по деплою проекта на ISPmanager с подключением к MySQL базе данных находится в файле DEPLOY.md.

Лицензия

Private project. All rights reserved.