Welcome to my blog! This is written as a React component — no MDX, no markdown, just plain TSX with full type safety and IDE support.
Why components as posts?
Writing posts as React components means you get the full power of the React ecosystem directly inside your content: interactive demos, async server components, typed props, and co-located imports. No plugin needed.
A Code Example
Here is a simple TypeScript function with syntax highlighting via Shiki:
example.ts
export const greet = (name: string) => `Hello, ${name}!`
// Usage
console.log(greet('World')) // Hello, World!How it works
At build time, Next.js scans the src/content/posts/ directory, dynamically imports each module to read its exported postInfo metadata, and uses generateStaticParams to pre-render every post as static HTML.
src/lib/posts.ts
export async function getAllPostsSorted() {
const slugs = getPostSlugs()
const posts = await Promise.all(
slugs.map(async (slug) => {
const mod = await import(`@/content/posts/${slug}`)
return { slug, postInfo: mod.postInfo }
})
)
return posts
.filter((p) => !p.postInfo.draft)
.sort((a, b) => (a.postInfo.date < b.postInfo.date ? 1 : -1))
}The result: zero client-side JavaScript for syntax highlighting, full dark mode support, and blazing-fast static pages.