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

Featured Links

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

The most feature-rich Next.js blog template out there that is easily configurable and customizable.

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

• Next.js 14 using App Router & TypeScript
• Wisp to manage blog posts
• Tailwind CSS for CSS framework
• Shadcn UI for UI components
• ESLint for static analysis
• TypeScript for type safety
• Font optimization with next/font

Quick Start Guide

First, install the dependencies:

npm install

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

cp .env.example .env

Note: You will need to get the NEXT_PUBLIC_BLOG_ID variable with the Blog ID obtained from wisp after creating an account.

Finally, run the development server:

npm run dev

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