Global News
A server-rendered news aggregator pulling live stories from global sources via the Mediastack API. Built to explore static site generation and server-side data fetching patterns in Next.js.
What I built
- Implemented static site generation with getStaticProps for fast, pre-rendered output
- Integrated Mediastack News API to surface live stories from sources worldwide
- Built with TypeScript and CSS Modules following a component-driven architecture
- Deployed to Vercel with automatic builds on push
The Problem
Wanted to explore how Next.js handles server-side data fetching and static generation compared to client-side React patterns -- and build something functional rather than another tutorial project.
The Process
Built a news aggregator using the Mediastack API, deliberately focusing on the data fetching layer. Implemented getStaticProps for build-time data fetching, explored the tradeoffs between static generation and server-side rendering, and structured components to keep data fetching concerns separate from presentation.
The Outcome
A working news aggregator with fast static output, deployed to Vercel. More importantly, a clear mental model of when to use each Next.js data fetching strategy based on how frequently the data changes.
The Lesson
Static generation is the right default for data that doesn't need to be real-time. Understanding the update frequency of your data should drive your fetching strategy -- not habit or convention.