I recently built StackSaver , a small content site that compares what AI and ecommerce tools cost. It has a landing page, two audience pages, a savings calculator and an MDX blog with about 20 posts.

The goal was simple: adding a post or changing a price should be a one-file edit , and everything else (sitemap, RSS, category pages, tables) should follow. Here's how it fits together with Next.js 16 (App Router) and Tailwind CSS 4.

1. Facts live in typed data files

Every price shown on the site comes from one array:

// src/data/stacks.ts export type PricedTool = { id : string ; name : string ; plan : string ; monthly : number ; group : " AI assistants " | " Ecom research " | " Creative " ; };

export const pricesCheckedOn = " October 2026 " ;

export const pricedTools : PricedTool [] = [ { id : " chatgpt-pro " , name : " ChatGPT " , plan : " Pro " , monthly : 200 , group : " AI assistants " }, { id : " claude-pro " , name : " Claude " , plan : " Pro " , monthly : 20 , group : " AI assistants " }, // ...…