Если вы ищете современный стартовый шаблон для блога, созданный на основе Next.js, проект NextJS Base Blog станет отличной отправной точкой. Это полнофункциональное приложение для блога с открытым исходным кодом, разработанное с использованием Next.js 15, React 19, TypeScript и Tailwind CSS 4 .
Проект отличается лаконичной архитектурой, современным пользовательским интерфейсом componentsи имитацией API-слоя, что делает его идеальным для разработчиков, желающих быстро создать блог без необходимости настройки бэкэнда.
Репозиторий GitHub: https://github.com/bfotool/nextjs-base-blog
Этот проект особенно полезен для:
Разработчики изучают приложения Next.jsRouter
Быстрое создание блога или контентного сайта.
Создание шаблона проекта Next.js
Разработка функций пользовательского интерфейса перед подключением реального бэкэнд-API.
Обзор проекта
NextJS Base Blog — это готовый к использованию шаблон блога, обладающий множеством распространенных функций, характерных для современных контентных сайтов.
Проект включает в себя:
главная страница с избранными публикациями
страницы записей блога
фильтрация по категориям
полнотекстовый поиск
нумерация страниц
оглавление
похожие посты
темная/светлая тема
Одна из самых интересных частей проекта — это слой Fake API, который имитирует REST API с помощью перехватчиков Axios. Это позволяет разработчикам создавать и тестировать приложение без необходимости использования бэкэнд-сервера .
Основные характеристики
Главная страница
На главной странице отображается несколько важных разделов:
главный пост
фильтры категорий
сетка сообщений в блоге
постраничная навигация
Дизайн полностью адаптивный и оптимизирован как для настольных компьютеров, так и для мобильных устройств.
Страница записи в блоге
Каждая статья доступна по динамическому маршруту:
/blog/[slug]
На странице блога представлено несколько полезных функций:
полный текст статьи
автоматическое оглавление
примерное время чтения
кнопки для обмена в социальных сетях
Предложения по похожим постам
Эти функции помогают создать профессиональный опыт чтения, аналогичный современным платформам для ведения блогов.
Страницы категорий
Пользователи могут просматривать публикации по категориям.
Пример маршрута:
/blog/category/[slug]
Эта функция позволяет читателям изучать контент по конкретным темам.
Функциональность поиска
Проект включает в себя встроенную страницу поиска:
/search
Поиск поддерживает:
результаты в режиме реального времени
подавленный вход
поиск по заголовкам, отрывкам и тегам
Это повышает удобство использования и помогает пользователям быстро находить нужный контент.
Страницы «О нас» и «Контакты»
Проект также включает дополнительные страницы, которые часто встречаются в профессиональных блогах.
О нас
На странице «О нас» представлена следующая информация:
команда
история проекта
основные ценности
Страница контактов
На странице «Контакты» размещена полностью проверенная форма, содержащая:
проверка формы
всплывающие уведомления
Обратная связь об успехах и ошибках
Поддержка темного режима
Блог поддерживает темный и светлый режимы .
В число функций входят:
автоматическое определение темы системы
ручное переключение
Сохранение темы оформления с помощью localStorage
Имитация API-слоя(разработка без бэкенда)
Одна из самых интересных особенностей этого проекта — система поддельных API .
Вместо обращения к реальному серверу приложение использует перехватчики Axios для имитации ответов REST API.
Как работает поддельный API
Экземпляр Axios создан в:
src/services/api-client.ts
Когда переменная среды включена:
NEXT_PUBLIC_USE_MOCK_API=true
Запросы перехватываются до того, как достигнут сети.
Имитаторы обработчиков возвращают ложные ответы с реалистичными задержками(200–600 мс).
Ответы ведут себя как реальные ответы API.
Имитационные данные хранятся в:
src/mocks/
Включая:
примеры сообщений
авторы
категории
Доступные конечные точки API
Имитационный API поддерживает несколько конечных точек:
| Метод | Конечная точка | Описание |
|---|---|---|
| ПОЛУЧАТЬ | /посты | Постраничная разбивка записей в блоге |
| ПОЛУЧАТЬ | /posts/featured | Рекомендуемые публикации |
| ПОЛУЧАТЬ | /posts/:slug | Отдельная запись в блоге |
| ПОЛУЧАТЬ | /категории | Список категорий |
| ПОЛУЧАТЬ | /авторы | Список авторов |
| ПОЧТА | /контакт | Отправить контактную форму |
Технологический стек
В проекте используется современный фронтенд-стек.
| Слой | Технологии |
|---|---|
| Рамки | Next.js 15 |
| Библиотека пользовательского интерфейса | React 19 |
| Язык | Машинопись |
| Стиль | Tailwind CSS 4 |
| HTTP-клиент | Аксиос |
| Иконки | Реакция Люцида |
| Ворсинки | ESLint |
| Форматирование | Прекраснее |
Этот стек предоставляет:
надежная безопасность типа
поддерживаемая архитектура
современный опыт разработчика
Структура проекта
Структура проекта основана на чистой и масштабируемой архитектуре.
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
ПриложениеRouter
В этом appкаталоге содержатся все маршруты приложения.
Примеры:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
Это соответствует архитектуре приложений Next.jsRouter, представленной в более новых версиях Next.js.
Компоненты
Пользовательский интерфейс componentsорганизован в логические группы:
components/layout
components/common
components/blog
Такая структура обеспечивает организованность кода пользовательского интерфейса и упрощает его сопровождение.
Уровень сервисов
В папке servicesсодержится логика, связанная с API:
конфигурация API-клиента
почтовая служба
категория обслуживания
сервис контактной формы
Этот слой отделяет логику получения данных от пользовательского интерфейсаcomponents, что повышает масштабируемость.
Инструкция по установке
Требования
Перед началом убедитесь, что у вас есть:
Node.js 18 или более поздняя версия
npm, yarn или pnpm
Клонируйте репозиторий
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
Установите зависимости
npm install
Настройка переменных среды
cp .env.example .env
Запустите сервер разработки.
npm run dev
Откройте браузер и перейдите по ссылке:
http://localhost:3000
Доступные скрипты
| Командование | Описание |
|---|---|
| npm run dev | Запуск сервера разработки |
| npm run build | Создать производственную сборку |
| npm run start | Запуск производственного сервера |
| npm run lint | Запустите ESLint |
| формат запуска npm | Форматирование кода с помощью Prettier |
| npm run type-check | Выполнить проверку TypeScript |
Переход на настоящий API
Если вы хотите подключить проект к реальному бэкэнд-API, выполните следующие шаги.
Шаг 1: Отключите Mock API
Отредактируйте .envфайл:
NEXT_PUBLIC_USE_MOCK_API=false
Шаг 2: Укажите базовый URL-адрес API.
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Шаг 3: Сопоставление типов данных
Убедитесь, что ваш бэкэнд API возвращает данные, соответствующие определениям TypeScript в:
src/types/index.ts
Никаких дополнительных изменений в коде не требуется.
Настройка контента
Макет контента можно редактировать внутри:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
Это позволяет разработчикам быстро настраивать демонстрационный контент.
Настройка темы и пользовательского интерфейса
Глобальный стиль можно найти в:
src/app/globals.css
В проекте используются следующие шрифты:
DM Sans
JetBrains Mono
Вы можете изменять стили или заменять шрифты в зависимости от требований вашего дизайна.
Заключение
NextJS Base Blog — это мощный и современный стартовый шаблон для создания блога с использованием Next.js.
К основным преимуществам проекта относятся:
современный технологический стек
чистая архитектура
макет API для разработки
Простая интеграция с реальными бэкэнд-API.
адаптивный пользовательский интерфейс и современные функции
Если вы создаёте блог, веб-сайт для разработчиков или контентную платформу с помощью Next.js, этот репозиторий может значительно сэкономить вам время на разработку.
Исходный код можно посмотреть здесь: https://github.com/bfotool/nextjs-base-blog