2026-04-12
No CMS, No Database: Adding a Blog to a Next.js Site
The decisions that matter before you write a line of code — how to build this in under 30 minutes by planning first.
- Next.js
- TypeScript
- Tailwind
- Shiki
- AI
You've got a Next.js app already scaffolded. Now you want to add a blog — without standing up a CMS or a database.
Decisions that matter
Match the existing site theme. Not a separate blog — a section. Same dark palette, same teal accent, same hover interactions.
Borrow a structure you already like. Find a reference with the layout you want and adapt it. Don't invent the UX. Mine was: featured hero up top, card grid below.
No database. A CMS or database adds cost and maintenance surface for no gain at this scale. Posts live as markdown files with gray-matter frontmatter. published: true gates what renders. featured: true flags the hero. Changing either means editing a text file.
Watch Shiki's colors. Shiki bakes background color into inline styles, which collides with @tailwindcss/typography. Strip it:
[&_.shiki]:!bg-transparent
[&_.shiki_code]:!bg-transparent
prose-pre:!bg-transparent
prose-pre:!p-0
prose-pre:!border-0Don't reach for new tools if your site already has the pieces. You only need gray-matter, marked, and shiki.
Before you write any code, make a plan. Describe your existing architecture, name a reference for the structure you want, state your constraints. Feed that into whatever agentic tool you're already using — Claude Code, Codex, Kilo Code — and let it handle the implementation. You'll spend your time on the parts that need judgment, not on boilerplate decisions.
What you need: gray-matter (parses frontmatter) · marked (markdown to HTML) · shiki (server-side syntax highlighting)