Next.jsReactBlogStarter

nextra-blog-starter — Next.js Blog Template

By phucbm

A blog template based on Nextra 4, using Next.js, React, TypeScript, shadcn/ui, and Tailwind CSS, with Pagefind search, Giscus comments, and View Transitions page transitions integrated, and support for deployment via Vercel.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-14View source

What stands out

A quick read of the recorded project description.

01

Based on Nextra 4, using Next.js 16, React 19, and TypeScript

02

The interface uses shadcn/ui and Tailwind CSS

03

Integrates Pagefind as the site search engine

04

Integrates Giscus as the comment system

05

Uses the View Transitions API in the App Router through next-view-transitions

06

Provides a one-click Vercel deployment entry

Template Details

This is a blog template based on Nextra 4. The README states that it is built with Next.js 16, React 19, and TypeScript, and uses shadcn/ui and Tailwind CSS as the interface styling approach. The template includes Pagefind as the search engine, uses Giscus to provide a comment system, and enables the View Transitions API in the Next.js App Router through next-view-transitions to implement page transitions.

For usage, the README provides a one-click Vercel deployment entry. Local development requires cloning the repository, then running pnpm i to install dependencies, and then running pnpm dev to start the development server. When writing articles, create a new .mdx file in the content directory and fill in front matter at the top of the file including title, date, description, tags, and author, with the body written in MDX format. The README does not explain the complete build and production deployment process, environment variable configuration, specific integration parameters for the comment and search services, nor does it provide explanations of the content directory structure, theme customization, or internationalization.

Next.jsBlogStarter

Is it right for your project?

Use Cases

  • Building a personal blog with content written in MDX
  • Documentation or article sites that need site search and comment features
  • Blog projects that want to use the Next.js App Router and page transition effects
  • Blog prototypes deployed quickly via Vercel

Suitable For

  • Developers familiar with pnpm and the structure of Next.js projects
  • Authors who manage article content using MDX and front matter
  • Blog builders who need Pagefind search and Giscus comments
  • Users planning to deploy a blog on Vercel

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Clone the repository using GitHub CLI: gh repo clone phucbm/nextra-blog-starter

  2. 2

    Run pnpm i to install dependencies

  3. 3

    Run pnpm dev to start the development server

  4. 4

    Create a new .mdx file in the content directory and fill in front matter such as title, date, description, tags, and author at the top

  5. 5

    You can deploy with one click via the Vercel button in the README; the README does not explain environment variables or other deployment details

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

What is included here is the free version under the MIT license in a public repository; the free scope is the code of that version and does not mean that external services or third-party assets are free.

Must comply with when using

  • Allows free use, modification, commercial use, and distribution of that version's code.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the complete MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text
https://github.com/phucbm/nextra-blog-starter/blob/main/LICENSEhttps://github.com/phucbm/nextra-blog-starter/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-14. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 88 / 100
Technologies
Next.js · React
Website type
Blog · Starter
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2025-12-07
Screenshot last checked
2026-10-14

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: codex-user-requested-batch-review-20261015 · 2026-10-15

Inspect the recorded source material

SHA-256: f075a9a79040718cf6a192d1e2ff5f1f3e634521105213e2c403ec7ca9942330

2026-10-14T05:47:02.331Z

Source file / repository
# Nextra Blog Starter
<img width="1632" height="1061" alt="screenshot" src="https://github.com/user-attachments/assets/1c2ee6d0-719d-4f56-b39b-99dc3fcbb428" />

A modern, feature-rich blog template built with [Nextra](https://nextra.site).

## 🚀 Demo

- [Official Nextra Documentation](https://nextra.site)
- [Live Demo of This Template](https://nextra-blog.phucbm.com)

## Quick Start

You can deploy this template on Vercel by clicking the button below

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fphucbm%2Fnextra-blog-starter)

## Features

- [Nextra 4](https://nextra.site/docs) with Next.js 16 + React 19 + TypeScript
- [shadcn/ui](https://ui.shadcn.com/) and Tailwind CSS
- [Pagefind](https://the-guild.dev/blog/nextra-4#new-search-engine--pagefind) for search engine
- [Giscus](https://giscus.app/) for commenting system
- [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) in Next.js App Router with [next-view-transitions](https://github.com/shuding/next-view-transitions)

## Local Development

### Clone this repository

Using the GitHub CLI:
```bash
gh repo clone phucbm/nextra-blog-starter
```

### Install
```bash
pnpm i
```

### Run the development server
```bash
pnpm dev
```

## 📝 Usage

### Adding New Posts

1. Create a new `.mdx` file in the `content` directory
2. Add your front matter at the top of the file:

```yaml
---
title: Your Post Title
date: 2025/1/30
description: A brief description of your post
tags: [ "web development", "react" ]
author: Your Name
---
```

3. Write your content in MDX format below the front matter

---

Created with ❤️ by PHUCBM

Don't forget to ⭐ this repository if you found it helpful!
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

Next.js SaaS Starter

Next.js SaaS Starter

The official Next.js SaaS starter template, integrating email/password authentication, Stripe Checkout subscriptions, a dashboard with user/team CRUD, basic Owner/Member RBAC, and activity logging.

Next.js · SaaS

Next.js Commerce

Next.js Commerce

Vercel's officially maintained Next.js App Router ecommerce starter with deep Shopify integration, offering a complete product catalog, cart, and checkout flow. Core logic is modular for swapping backends, and community provider versions exist for BigCommerce, Medusa, and Saleor.

Next.js · E-commerce

Next-js-Boilerplate

Next-js-Boilerplate

A developer-first Next.js 16 starter with Tailwind CSS 4 and TypeScript, supporting both App Router and Page Router.

Next.js · Starter

tailwind-nextjs-starter-blog

tailwind-nextjs-starter-blog

A Next.js and Tailwind CSS blog starter template using Contentlayer for Markdown/MDX, with built-in SEO, code highlighting, and tags. It targets personal technical blogs and migration from Jekyll/Hugo to React, and supports one-click Vercel deployment.

Next.js · Blog

next-forge

next-forge

next-forge is a Turborepo-based Next.js template maintained by Vercel, positioned as a starting point for SaaS products.

Next.js · Starter

SaaS-Boilerplate

SaaS-Boilerplate

SaaS-Boilerplate is an open-source SaaS starter template built with Next.js App Router, React 19, TypeScript, Tailwind CSS, and Shadcn UI.

Next.js · SaaS