NextJS Base Blog: Modern Blog Starter With Next.js 15 & Tailwind

If you are looking for a modern blog starter template built with Next.js, the NextJS Base Blog project is an excellent starting point. It is a full-featured open-source blog application built with Next.js 15, React 19, TypeScript, and Tailwind CSS 4.

The project provides a clean architecture, modern UI components, and a mock API layer, making it ideal for developers who want to build a blog quickly without setting up a backend.

GitHub Repository: https://github.com/bfotool/nextjs-base-blog

This project is especially useful for:

• Developers learning Next.js App Router

• Building a blog or content website quickly

• Creating a Next.js boilerplate project

• Developing UI features before connecting a real backend API

Project Overview

NextJS Base Blog is designed as a production-ready blog template with many common features found in modern content websites.

The project includes:

• a homepage with featured posts

• blog post pages

• category filtering

• full-text search

• pagination

• table of contents

• related posts

• dark/light theme

One of the most interesting parts of the project is the Fake API Layer, which simulates a REST API using Axios interceptors. This allows developers to build and test the application without needing a backend server.

Key Features

Homepage

The homepage displays several important sections:

• featured hero post

• category filters

• a grid of blog posts

• paginated navigation

The layout is fully responsive and optimized for both desktop and mobile devices.

Blog Post Page

Each article is accessible via a dynamic route:

/blog/[slug]

The blog post page includes several useful features:

• full article content

• automatic table of contents

• estimated reading time

• social share buttons

• related posts suggestions

These features help create a professional reading experience similar to modern blogging platforms.

Category Pages

Users can browse posts by category.

Example route:

/blog/category/[slug]

This feature allows readers to explore content within specific topics.

Search Functionality

The project includes a built-in search page:

/search

Search supports:

• real-time results

• debounced input

• searching across titles, excerpts, and tags

This improves usability and helps users find relevant content quickly.

About and Contact Pages

The project also includes additional pages commonly found on professional blogs.

About Page

The About page introduces:

• the team

• the project story

• core values

Contact Page

The Contact page includes a fully validated form with:

• form validation

• toast notifications

• success and error feedback

Dark Mode Support

The blog supports dark mode and light mode.

Features include:

• automatic system theme detection

• manual toggle

• theme persistence using localStorage

Fake API Layer (Development Without Backend)

One of the most interesting parts of this project is its Fake API system.

Instead of calling a real server, the application uses Axios interceptors to simulate REST API responses.

How the Fake API Works

1. Axios instance is created in:

src/services/api-client.ts

2. When the environment variable is enabled:

NEXT_PUBLIC_USE_MOCK_API=true

3. Requests are intercepted before reaching the network.

4. Mock handlers return fake responses with realistic delays (200–600 ms).

5. Responses behave like real API responses.

The mock data is stored in:

src/mocks/

Including:

• sample posts

• authors

• categories

Available API Endpoints

The mock API supports several endpoints:

Technology Stack

The project uses a modern frontend stack.

This stack provides:

• strong type safety

• maintainable architecture

• modern developer experience

Project Structure

The project structure follows a clean and scalable architecture.

src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/

App Router

The app directory contains all application routes.

Examples:

app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx

This follows the Next.js App Router architecture introduced in newer versions of Next.js.

Components

UI components are organized into logical groups:

components/layout
components/common
components/blog

This structure keeps the UI code organized and easier to maintain.

Services Layer

The services folder contains API-related logic:

• API client configuration

• post service

• category service

• contact form service

This layer separates data fetching logic from UI components, which improves scalability.

Installation Guide

Requirements

Before starting, make sure you have:

• Node.js 18 or later

• npm, yarn, or pnpm

Clone the Repository

git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog

Install Dependencies

npm install

Configure Environment Variables

cp .env.example .env

Start the Development Server

npm run dev

Open your browser and visit:

http://localhost:3000

Available Scripts

Switching to a Real API

If you want to connect the project to a real backend API, follow these steps.

Step 1: Disable Mock API

Edit the .env file:

NEXT_PUBLIC_USE_MOCK_API=false

Step 2: Set the API Base URL

NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com

Step 3: Match Data Types

Ensure your backend API returns data matching the TypeScript definitions in:

src/types/index.ts

No additional code changes are required.

Customizing Content

Mock content can be edited inside:

src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts

This allows developers to quickly customize demo content.

Customizing Theme and UI

Global styling can be found in:

src/app/globals.css

The project uses the following fonts:

• DM Sans

• JetBrains Mono

You can modify styles or replace fonts depending on your design requirements.

Conclusion

NextJS Base Blog is a powerful and modern starter template for building a blog with Next.js.

Key advantages of the project include:

• modern tech stack

• clean architecture

• mock API for development

• easy integration with real backend APIs

• responsive UI and modern features

If you are building a blog, developer website, or content platform with Next.js, this repository can save you significant development time.

Explore the source code here: https://github.com/bfotool/nextjs-base-blog