Next.js Blog with Strapi is a static blog template that pairs the Next.js React framework with the Strapi headless CMS to produce a server-rendered, SEO-friendly article site. It is a demo project created by AlexTechNoir, deployed on Vercel, and designed to show how to build a feature-rich static blog with a headless CMS backend.
What is Next.js Blog with Strapi?
This template is a complete blog starter built on Next.js (React) and Strapi, a headless CMS. It takes content managed through Strapi (with MongoDB Atlas as the database and Cloudinary for image storage) and outputs a static, responsive, mobile-first blog. The initial article list is fetched server-side for SEO, while pagination and search happen client-side. The project is deployed on Vercel and uses Strapi as its content API.
Key Features
- Static & responsive — Generates a static site with a mobile-first, responsive layout and a hamburger menu for mobile navigation.
- Autocomplete search with highlighting — Search results include highlighted matches, with text cut around the match; uses Material-UI Autocomplete and SWR for data fetching.
- Dark mode — Automatically detects the system preference and saves the user's choice in LocalStorage, with a toggle in the UI.
- Load More pagination — Uses the SWR useSWRInfinite hook to fetch additional articles on demand, with the first 7 articles server-rendered and subsequent articles pulled client-side.
- SEO-friendly article list — Article listings are initially fetched server-side, then paginated client-side, balancing crawlability with performance.
- Progressive responsive images — Images are stored on Cloudinary and rendered with progressive loading for better performance.
- Categories — Articles are organized into categories, each with its own page.
- Disqus comments — Integrates Disqus via the disqus-react package, including comment counts on list items.
- Additional niceties — Includes a sound effect, category pages, and a search page that re-fetches results to avoid stale highlights.
Tech stack: Next.js, Strapi, styled-components, Material-UI, SWR, react-markdown, Showdown, React Font Awesome, disqus-react.
Who is it for?
- Developers building a headless CMS blog — This template shows a complete integration between Next.js and Strapi, including server-side rendering, client-side pagination, and search.
- Bloggers who want a static site — If you prefer managing content in Strapi but want the speed and SEO benefits of a static Next.js site, this project gives you a working starting point.
- Developers learning advanced Next.js patterns — The codebase demonstrates SWR infinite pagination, dynamic routes without static export conflicts, and careful handling of DOM updates during search.
What can you do with it?
- Launch a production-ready blog — Set up Strapi, MongoDB Atlas, and Cloudinary, then deploy the Next.js frontend to Vercel for a static blog.
- Implement search with highlighted results — The search page fetches articles from Strapi's API based on a query parameter and highlights matches with a mark tag, cutting text around the match to give context.
- Customize the theme — Because styling uses styled-components and Material-UI, you can adapt the look and layout without changing the data layer.
How does it work?
Content is stored in Strapi, which exposes a REST API. Next.js fetches this API during build (or server-side at runtime) to generate static pages for the article list and category pages. On the client side, SWR handles search queries and pagination. For search, the user submits a query via the URL's query string; the search page fetches results from Strapi, converts markdown to HTML and text, then wraps matches in mark tags to highlight them. The "Load More" button uses useSWRInfinite to fetch one additional article per click, offset by the number of server-rendered articles.
FAQ
Does this template work without Strapi?
No. The blog depends on the Strapi API for all content, including articles, categories, and search results. Without Strapi running, the site cannot fetch article data. The frontend alone is not a self-contained blog engine.
Why did the live demo stop working?
The original demo hosted Strapi on Heroku. Heroku shut down its free tier on November 28, 2022, so the backend no longer runs. The code in the repository remains valid, and you can host Strapi elsewhere (Railway, DigitalOcean, etc.) to bring the blog back online.
What database and image hosting does it use?
Strapi uses MongoDB Atlas as its database. Images are stored on Cloudinary and served through Strapi's API. Both are cloud services, so you'll need accounts for them when setting up your own copy.
Is the blog truly static?
The article list is statically generated on the server side for SEO, but pagination and search run client-side. The author notes that using dynamic routes for search would break static generation, so the template avoids them and uses query parameters instead.
