News App Master is a news web application template built on Next.js 13.3 and TypeScript that serves live articles from the Mediastash API with 20-second revalidation, prebuilt static pages, and a GraphQL layer generated by StepZen.
What is News App Master?
This is a GitHub repository for a live news web app. It takes a Mediastash API key (configured at build time) and produces a fast, search-engine-optimized news site with pre-rendered article pages and dark/light mode. The application runs on Next.js 13.3 with Tailwind CSS and uses GraphQL through StepZen to batch API calls and auto-generate TypeScript definitions.
Key Features
- Live data revalidation — Content from the Mediastash API is revalidated every 20 seconds using Next.js revalidate, giving readers fresh articles while serving cached pages for instant load times.
- GraphQL batching — GraphQL queries through StepZen batch multiple Mediastash API calls into a single efficient request, reducing round trips.
- Automatic TypeScript definitions — StepZen generates TypeScript types from the GraphQL schema, removing manual type-writing and keeping the codebase type-safe.
- Prebuilt pages with generateStaticParams — Article and category pages are prebuilt at build time, reducing first-load wait time and improving SEO.
- Streaming SSR — Parts of the UI render incrementally to the client via Next.js streaming server-side rendering.
- Custom SVG loader with React Suspense — SVG assets load lazily under the hood using React Suspense, shrinking initial bundle weight.
- Dark/light mode — Theme switching is implemented with next-themes and Tailwind CSS, supporting system preference and manual toggle.
Who is it for?
- Next.js developers who want a production-ready news site scaffold with TypeScript, GraphQL, and Tailwind already configured.
- Full-stack developers interested in integrating StepZen as a GraphQL layer over REST APIs like Mediastash.
- Teams shipping content sites that need live data freshness combined with static-generation speed and caching.
What can you do with News App Master?
- News publishers: stand up a live news site by plugging in a Mediastash API key, then rely on 20-second revalidation to keep headlines current.
- Frontend learners: study how Next.js 13 app router, generateStaticParams, and React Suspense interact in a real codebase.
- SEO-conscious builders: use prebuilt pages and streaming SSR to get fast time-to-first-byte and indexed article pages.
How does it work?
Clone the repository, run an install command (npm, pnpm, or yarn each work), then start the development server and open http://localhost:3000. The build script generates static pages for article routes and revalidates the data at the configured interval.
