Digital Magazine Starter Kit is an MIT-licensed Next.js boilerplate for building a PWA-ready digital magazine with Strapi CMS as the content backend and Tailwind CSS for styling.
What is the Digital Magazine Starter Kit?
Digital Magazine Starter Kit is a GitHub template that gives you a complete digital magazine website, statically generated with Next.js and TypeScript, with all content managed through Strapi CMS. The kit produces a responsive, installable PWA with offline reading, a search module, and dark/light themes. It was created by edgarlr and is available under the MIT License. The live demo is available at https://magazine-starter.vercel.app.
Key Features
- Static Site Generation with Next.js — The magazine is built as static HTML with Next.js and TypeScript, improving performance and SEO while giving you React component flexibility.
- Strapi CMS integration — The project connects out-of-the-box to the Magazine Strapi CMS, letting editors manage contributors, categories, articles, and pages without touching code.
- PWA and offline support — A service worker enables offline access, and IndexedDB lets readers save articles for later; the site is also installable on devices.
- Dark and light themes — A UI provider switches between dark and light modes, with icons for dark mode generated separately.
- SEO and social media friendly — Open Graph and JSON-LD structured data are built in, along with a dynamically generated sitemap that reads from site constants.
- Preview mode — Editors can preview unpublished articles by setting the PREVIEW_SECRET and API_URL environment variables and configuring the Strapi preview content settings.
- Google Analytics — Page views are tracked after you set the GA_MEASUREMENT_ID environment variable; you can remove the tracker by editing two files.
- Search module — A search hook queries the CMS, but if the backend is slow (e.g., on Heroku) the site statically generates all published articles and runs a local search instead.
Who is it for?
- Magazine publishers and editors — Manage content entirely from the Strapi admin panel and publish to a fast static site without a custom CMS build.
- Next.js developers — Get a typed, Tailwind-styled codebase with CSS Modules, custom hooks, and a UI provider to extend into a larger editorial product.
- Indie writers and small teams — Launch a magazine-style PWA with offline reading so readers can save articles and come back without a connection.
What can you do with the Digital Magazine Starter Kit?
- Launch a working magazine in a few clicks — Use the
Use this templatebutton on GitHub to create a copy, connect it to a Strapi backend, set API_URL, PREVIEW_SECRET, and GA_MEASUREMENT_ID, then deploy to Vercel with the provided deploy button. - Preview drafts before they go live — Configure the Strapi preview content URL with your secret and click
Previewon any article to see how it looks before setting its status to published. - Customize the site identity — Edit lib/constants.ts for site name, SEO defaults, and other global values, and replace the favicon and icon set in public/static/favicon.
How does the template work on a daily basis?
When an editor creates or updates articles, categories, or contributors in Strapi, the Next.js site fetches that content at build time and generates static pages. For preview mode, the site uses the API URL and a secret to display unpublished drafts, and for search, it either queries the CMS API or falls back to a local index of all published articles. Because the site is statically generated, deploys to Vercel just need the environment variables pointing at the Strapi backend.
FAQ
How do I deploy the Digital Magazine Starter Kit?
Click the Deploy with Vercel button, which clones the repository and prompts you to set API_URL, PREVIEW_SECRET, and GA_MEASUREMENT_ID. You must have your Strapi CMS deployed first and use its URL as API_URL without a trailing slash.
How do I remove Google Analytics from the template?
Remove the two script tags from the HEAD component in _document.tsx and delete the onRouterChange handler plus the related useEffect and useRouter imports in _app.tsx. After removal, GA_MEASUREMENT_ID can be filled with dummy text if deploying to Vercel.
Why is the search slow on my deployed site?
The search hook can be slow when the Strapi backend is hosted on Heroku because of the free tier's sleep behavior. If you host Strapi elsewhere, uncomment the search hook for faster API-based search; otherwise the site generates static pages with all published articles and runs a local search.
What content types does the Strapi CMS need?
The Magazine Strapi CMS requires contributors, categories, articles, and pages, and you must set Roles & Permissions to allow find on those content types. Each article and page also needs its status set to published for it to appear on the site.
