News App Master

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.