Skip to content
Avatar of Wisp-CMSWisp-CMS/nextjs-blog-cms-wisp

A Next.js 14 Blog with Server Components

A blog template with Next.js 14 App Router, Wisp, Tailwind CSS, Shadcn and Dark Mode.

Framework
Use Case
CMS
public

A Next.js 14 Blog using Server Components - Backed by Wisp CMS

Featured Links

This is a Next.js, Tailwind CSS, Shadcn blogging starter template. This version is using Next.js 14 App Router with React Server Components and uses Wisp for publishing blog posts.

Probably the most feature-rich Next.js blog template out there that is easily configurable and customizable. It's perfect as an upgrade from blogs using Jekyll, Hugo, Gatsby, Contentlayer, or ContentCollections.

About Wisp

Wisp is a modern CMS for adding blogs to websites. It features an intuitive, medium-like editorial experience so that you can focus on writing instead of getting distracted by markdown.

Features

  • Beautiful blog starter kit with server rendering using Next.js 14 Server Components
  • Responsive layout for mobile devices
  • Filter blog posts by tags
  • About page
  • Light & dark mode
  • Automatic hierarchical sitemap generation
  • Automatic Open Graph image generation
  • Automatic Related Posts suggestions
  • RSS Feed

Technologies

Step-by-step Video Tutorial

We've now included a 3-part video tutorial to help you run this blog on your computer:

Quick Start Guide

First, install the dependencies:

npm i

Then, copy the .env.example file to .env:

cp .env.example .env

Note: You will need to populate the NEXT_PUBLIC_BLOG_ID variable with the Blog ID obtained from wisp after you've created an account.

Finally, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Getting Help

Full documentation on how to get started on wisp as well as this starter kit is available on wisp's documentation site

Other template

Like this template?

Check out our corporate blog template here.

public
Avatar of Wisp-CMSWisp-CMS/nextjs-blog-cms-wisp

A Next.js 14 Blog with Server Components

A blog template with Next.js 14 App Router, Wisp, Tailwind CSS, Shadcn and Dark Mode.

Framework
Use Case
CMS

A Next.js 14 Blog using Server Components - Backed by Wisp CMS

Featured Links

This is a Next.js, Tailwind CSS, Shadcn blogging starter template. This version is using Next.js 14 App Router with React Server Components and uses Wisp for publishing blog posts.

Probably the most feature-rich Next.js blog template out there that is easily configurable and customizable. It's perfect as an upgrade from blogs using Jekyll, Hugo, Gatsby, Contentlayer, or ContentCollections.

About Wisp

Wisp is a modern CMS for adding blogs to websites. It features an intuitive, medium-like editorial experience so that you can focus on writing instead of getting distracted by markdown.

Features

  • Beautiful blog starter kit with server rendering using Next.js 14 Server Components
  • Responsive layout for mobile devices
  • Filter blog posts by tags
  • About page
  • Light & dark mode
  • Automatic hierarchical sitemap generation
  • Automatic Open Graph image generation
  • Automatic Related Posts suggestions
  • RSS Feed

Technologies

Step-by-step Video Tutorial

We've now included a 3-part video tutorial to help you run this blog on your computer:

Quick Start Guide

First, install the dependencies:

npm i

Then, copy the .env.example file to .env:

cp .env.example .env

Note: You will need to populate the NEXT_PUBLIC_BLOG_ID variable with the Blog ID obtained from wisp after you've created an account.

Finally, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Getting Help

Full documentation on how to get started on wisp as well as this starter kit is available on wisp's documentation site

Other template

Like this template?

Check out our corporate blog template here.

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential