A clean blog starter built with Next.js 14 and TypeScript. Ready to deploy and easy to customize.
Home page with featured posts and tag filtering
Individual post page with responsive typography
Custom 404 page with a clean design
- Next.js 14 with App Router
- SEO metadata and OpenGraph tags
- Responsive design with Tailwind CSS
- Write posts in Markdown
- Tag system for organizing content
- Analytics support
- Custom 404 page
- Mobile-friendly
- Click the "Deploy with Vercel" button above
- Follow the setup steps
- Done!
# Clone the repository
git clone https://github.com/GanLiuuuu/nextjs-seo-blog-starter.git my-blog
# Navigate to the directory
cd my-blog
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:3000 in your browser.
nextjs-seo-blog-starter/
├── app/ # Next.js 14 app directory
│ ├── page.tsx # Home page
│ ├── posts/ # Post pages
│ └── not-found.tsx # Custom 404 page
├── components/ # Reusable React components
├── content/ # Blog posts in markdown
├── lib/ # Utility functions and data fetching
├── public/ # Static assets
│ └── images/ # Images including previews
└── styles/ # Global styles and Tailwind config
Create new blog posts by adding markdown files to the content/posts directory:
---
title: "My First Blog Post"
date: "2024-01-01"
tags: ["nextjs", "react"]
excerpt: "A brief description of your post"
coverImage: "/images/posts/my-first-post.jpg" # Optional cover image
---
Your content here...Uses Tailwind CSS. Customize by editing:
tailwind.config.js- Colors, fonts, etc.styles/globals.css- Global styles- Component files for specific styling
Update site metadata in app/layout.tsx:
export const metadata = {
title: 'Your Blog Name',
description: 'Your blog description',
// ... other metadata
}Contributions are welcome! Please feel free to submit a Pull Request.
MIT License
If you find this template helpful, please consider giving it a ⭐️ on GitHub!