🚀 Next.js Blog Starter Kit

A clean, minimal, and production-ready blog starter kit built with Next.js, TypeScript, and Tailwind CSS. Perfect for developers who want to quickly set up a personal blog or documentation site.

✨ Features

• 📝 Markdown Support - Write posts in markdown with frontmatter
• 🎨 Minimal Design - Clean, typography-focused interface
• 📱 Responsive - Mobile-first responsive design
• ⚡ Fast - Built with Next.js static generation
• 🔒 Type Safe - Full TypeScript support
• 🎯 SEO Ready - Optimized for search engines
• 🚀 Production Ready - Ready to deploy to Vercel, Netlify, etc.
• 📦 Zero Config - Get started in minutes

🏗️ Built With

• Next.js 15 - React framework
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS
• @tailwindcss/typography - Beautiful typography
• gray-matter - Front matter parsing
• remark - Markdown processing

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository

   git clone https://github.com/aiferrydermawan/nextjs-blog-starter-kit.git
   cd nextjs-blog-starter-kit

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser Navigate to http://localhost:3000

📁 Project Structure

├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Header.tsx      # Navigation header
│   │   ├── Footer.tsx      # Site footer
│   │   └── Layout.tsx      # Page layout wrapper
│   ├── lib/                # Utility functions
│   │   └── posts.ts        # Blog post utilities
│   ├── pages/              # Next.js pages
│   │   ├── index.tsx       # Home page
│   │   ├── blog/           # Blog pages
│   │   ├── about.tsx       # About page
│   │   └── contact.tsx     # Contact page
│   ├── posts/              # Markdown blog posts
│   └── styles/             # Global styles
│       └── globals.css     # Tailwind CSS
├── public/                  # Static assets
├── tailwind.config.js      # Tailwind configuration
├── next.config.ts          # Next.js configuration
└── package.json            # Dependencies and scripts

📝 Adding Blog Posts

1. Create a new markdown file

Create a new .md file in the src/posts/ directory:

touch src/posts/my-new-post.md

2. Add frontmatter

Every post needs frontmatter at the top:

---
title: "My New Blog Post"
slug: "my-new-blog-post"
date: "2024-01-15"
excerpt: "A brief description of your post"
tags: ["nextjs", "react", "web-development"]
---

# Your Post Title

Your content goes here...

3. Write your content

Use standard markdown syntax:

## Section Header

- List item 1
- List item 2

**Bold text** and *italic text*

```javascript
console.log("Code blocks work too!");

4. Your post is live!

The post will automatically appear on your blog page at /blog.

🎨 Customization

Layout & Components

• Header: Edit src/components/Header.tsx
• Footer: Edit src/components/Footer.tsx
• Layout: Edit src/components/Layout.tsx

Styling

• Global CSS: Edit src/styles/globals.css
• Tailwind: Modify tailwind.config.js

Blog Configuration

Edit src/lib/posts.ts to add more frontmatter fields or change post processing logic.

📱 Pages

• Home (/) - Landing page with blog introduction
• Blog (/blog) - List of all blog posts
• Post (/blog/[slug]) - Individual blog post pages
• About (/about) - About page
• Contact (/contact) - Contact form

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository to Vercel
3. Deploy with zero configuration

Netlify

1. Push your code to GitHub
2. Connect your repository to Netlify
3. Build command: npm run build
4. Publish directory: .next

Other Platforms

This starter kit works with any platform that supports Next.js:

• Railway
• Render
• DigitalOcean App Platform
• AWS Amplify

📊 Performance

• Lighthouse Score: 95+ across all metrics
• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Development

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Next.js team for the amazing framework
• Tailwind CSS for the utility-first CSS framework
• Vercel for hosting and deployment

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: aiferrydermawan@gmail.com

⭐ Star History

---

Made with ❤️ by Ferry Dermawan

If this starter kit helps you, please give it a ⭐ star!