Menu

1 / 2

Static Sites With YAML Data in Next.js 15 App Router

DEV Community·ALi·6 months ago
#SB0m0swI
#when#nextjs#yaml#slug#game
Reading 0:00
15s threshold

I recently shipped a directory site and went back to a pattern I keep reaching for: YAML files as the data layer for static Next.js sites. No CMS, no database, no API routes. Just files in a directory, read at build time.

This post walks through the setup. It's not flashy — it's the kind of architecture that gets out of your way so you can focus on content.

When this pattern fits

You have a known set of entities (products, games, restaurants, neighborhoods, libraries)

Content updates daily, not by-the-second

You want zero runtime cost

You want git to be your version control AND your CMS

If any of those is false, use a database. If all are true, this is the simplest thing that works.

The directory

data/ games/ klondike.yaml freecell.yaml spider.yaml app/ games/ [slug]/ page.tsx lib/ games.ts

Enter fullscreen mode

Exit fullscreen mode

Each .yaml file is one page. Filename becomes URL slug.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.