The Next.js Cosmic Blog template is a statically generated blog example from the official Next.js examples collection that pairs the Next.js framework with the Cosmic headless CMS as its data source and supports one-click deployment to Vercel.
What is the Next.js Cosmic Blog template?
It is an official example maintained by the Vercel Next.js team that demonstrates Next.js's Static Generation feature using Cosmic as the content backend. The template takes blog posts stored in a Cosmic bucket — including their slugs, published content, and draft states — and produces a statically generated blog with a post list and individual post pages. It runs on the Next.js framework, has a live demo at https://cosmic-next-blog.vercel.app/, and is packaged as a create-next-app example (alias cms-cosmic).
Key Features
- Next.js Static Generation — Pre-renders blog pages at build time using Next.js's Static Generation feature, which is the core pattern this example exists to demonstrate.
- Cosmic CMS integration — Connects to a Cosmic bucket through three environment variables:
COSMIC_BUCKET_SLUG,COSMIC_READ_KEY, andCOSMIC_PREVIEW_SECRET. - Preview Mode support — Implements Next.js Preview Mode so draft posts can be reviewed before publishing, with a preview link built from a secret plus the
[object_slug]shortcode. - One-command bootstrap — Sets up the project with
npx create-next-app --example cms-cosmic cms-cosmic-app, with equivalent Yarn and pnpm commands documented. - One-click Vercel deployment — Ships a Deploy with Vercel button and a template URL that pre-fills the three required environment variables for the cloned repository.
- Local development workflow — Includes a
.env.local.examplefile to copy to.env.local; afternpm installandnpm run dev, the blog runs at http://localhost:3000. - Part of a large CMS example family — Listed alongside 28 related examples in the Next.js collection, including Contentful, Sanity, WordPress, Ghost, and Drupal.
Who is it for?
- Developers learning Next.js Static Generation — Follow the README's six setup steps to see how a headless CMS feeds pre-rendered pages, which is useful before building custom static sites.
- Teams already using Cosmic — Stand up a blog from the Next.js Static Blog app in the Cosmic App Marketplace, then manage posts through the Cosmic dashboard.
- Static-site deployers — Use the Vercel template button or the manual GitHub import path to get a CMS-driven blog live without managing a server.
What can you do with the template?
- Publish a CMS-backed blog: manage posts as objects in a Cosmic bucket and have Next.js statically generate the pages at build time.
- Review drafts before publishing: configure Cosmic's Preview Link with the preview secret and
[object_slug]shortcode, then toggle preview mode to see unpublished titles. - Reuse it as a CMS integration starting point: clone the example and swap the Cosmic queries for another backend, or compare it with the other CMS examples in the same collection.
How does the template work?
The README documents six steps: create a Cosmic account and project, install the Next.js Static Blog app from the Cosmic App Marketplace, copy .env.local.example to .env.local and fill in the bucket slug, read key, and preview secret, run npm install and npm run dev, configure the Preview Link under Posts Edit Settings in Cosmic, then deploy to Vercel either by importing the repository or clicking the deploy template button.
FAQ
Does the template require a Cosmic account?
Yes. Setup starts by creating an account and a project on Cosmic, then installing the Next.js Static Blog app from the Cosmic App Marketplace. The blog reads posts from a Cosmic bucket through the API using the bucket slug and read key.
What environment variables does the template need?
Three variables go into .env.local: COSMIC_BUCKET_SLUG and COSMIC_READ_KEY, both found under API Access in Cosmic's Basic Settings, and COSMIC_PREVIEW_SECRET, which can be any random string without spaces and is used for Preview Mode.
How do I test preview mode?
In Cosmic's Posts Edit Settings, add a Preview Link such as http://localhost:3000/api/preview?secret=<secret>&slug=[object_slug] using your preview secret. Save a post as a draft without publishing, then open the preview link — the updated draft title appears only in preview mode.
Can I deploy the blog to Vercel?
Yes, two paths are documented: push the local project to GitHub, GitLab, or Bitbucket and import it to Vercel while setting the three environment variables, or use the Deploy with Vercel template button, which clones the example and pre-fills the environment variable fields.
What other CMS backends are available?
The Next.js examples collection lists 28 related blog examples, including AgilityCMS, Builder.io, ButterCMS, Contentful, DatoCMS, Drupal, Ghost, Prismic, Sanity, Storyblok, and WordPress, each pairing the same blog structure with a different content backend.
Alternatives
The same Next.js blog template is available for many other CMSs in the examples collection. Named alternatives include Contentful, Sanity, Storyblok, WordPress, and Ghost, plus the Blog Starter for a setup without a CMS backend.
