Building a Blog Feature with Next.js and Velite
2 min read
#nextjs#blog#velite#typescript
0 Views
In this post, I'll share how I built a blog feature for my portfolio website using Next.js, Velite, and modern web technologies.
Why Velite?
Velite is a modern content management system that works perfectly with Next.js. It provides:
- Type-safe content with Zod schemas
- Markdown/MDX support with syntax highlighting
- Static generation for optimal performance
- Git-based workflow for content management
Key Features
1. Internationalization
The blog supports multiple languages using Next.js's built-in i18n routing:
// Dynamic routing with locale
/[locale]/blog/[slug]
2. SEO Optimization
Each blog post includes:
- Meta tags for social sharing
- Structured data for search engines
- Clean URLs with slugs
- Sitemap generation
3. Markdown Support
Full markdown support including:
- Code blocks with syntax highlighting
- Tables and lists
- Images and links
- GitHub Flavored Markdown (GFM)
4. Love Feature
A simple engagement feature that:
- Stores counts without requiring login
- Uses localStorage for client-side tracking
- Prevents duplicate loves
Implementation Details
Content Schema
const BlogPostSchema = z.object({
title: z.string(),
description: z.string(),
slug: z.string(),
date: z.coerce.date(),
locale: z.enum(['id', 'en']),
tags: z.array(z.string()).default([]),
draft: z.boolean().default(false),
loveCount: z.number().default(0),
});
Markdown Rendering
Using react-markdown with rehype-pretty-code for beautiful code blocks:
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[[rehypePrettyCode, options]]}
>
{content}
</ReactMarkdown>
Conclusion
Building a blog with modern tools makes the process efficient and enjoyable. The combination of Next.js, Velite, and TypeScript provides a robust foundation for content management.
What features would you like to see in a blog system?
0 Views