VercelLogotypeVercelLogotype
LoginSign Up

Next.js Blog with microCMS

A simple blog, built with Next.js and microCMS.

DeployView Demo
microcms-thumbnail-1
GitHub Repomicrocmsio/simple-blog-with-microcms
LicenseView License
filter section list

Related Templates

Next.js Boilerplate

Get started with Next.js and React in seconds.
Next.js Boilerplate thumbnail

Blog Starter Kit

A statically generated blog example using Next.js and Markdown.
Blog Starter Kit thumbnail

Next.js Blog with Draft Mode

Static blog with Preview Mode, built with Next.js and Contentful.
Next.js Blog with Draft Mode thumbnail

Get Started

  • Templates
  • Supported frameworks
  • Marketplace
  • Domains

Build

  • Next.js on Vercel
  • Turborepo
  • v0

Scale

  • Content delivery network
  • Fluid compute
  • CI/CD
  • Observability
  • AI GatewayNew
  • Vercel AgentNew

Secure

  • Platform security
  • Web Application Firewall
  • Bot management
  • BotID
  • SandboxNew

Resources

  • Pricing
  • Customers
  • Enterprise
  • Articles
  • Startups
  • Solution partners

Learn

  • Docs
  • Blog
  • Changelog
  • Knowledge Base
  • Academy
  • Community

Frameworks

  • Next.js
  • Nuxt
  • Svelte
  • Nitro
  • Turbo

SDKs

  • AI SDK
  • Workflow SDKNew
  • Flags SDK
  • Chat SDK
  • Streamdown AINew

Use Cases

  • Composable commerce
  • Multi-tenant platforms
  • Web apps
  • Marketing sites
  • Platform engineers
  • Design engineers

Company

  • About
  • Careers
  • Help
  • Press
  • Legal
  • Privacy Policy

Community

  • Open source program
  • Events
  • Shipped on Vercel
  • GitHub
  • LinkedIn
  • X
  • YouTube

Loading status…

Select a display theme:
    • AI Cloud
      • v0

        Build applications with AI

      • AI SDK

        The AI Toolkit for TypeScript

      • AI Gateway

        One endpoint, all your models

      • Vercel Agent

        An agent that knows your stack

      • Sandbox

        AI workflows in live environments

    • Core Platform
      • CI/CD

        Helping teams ship 6× faster

      • Content Delivery

        Fast, scalable, and reliable

      • Fluid Compute

        Servers, in serverless form

      • Observability

        Trace every step

    • Security
      • Bot Management

        Scalable bot protection

      • BotID

        Invisible CAPTCHA

      • Platform Security

        DDoS Protection, Firewall

      • Web Application Firewall

        Granular, custom protection

    • Company
      • Customers

        Trusted by the best teams

      • Blog

        The latest posts and changes

      • Changelog

        See what shipped

      • Press

        Read the latest news

      • Events

        Join us at an event

    • Learn
      • Docs

        Vercel documentation

      • Academy

        Linear courses to level up

      • Knowledge Base

        Find help quickly

      • Community

        Join the conversation

    • Open Source
      • Next.js

        The native Next.js platform

      • Nuxt

        The progressive web framework

      • Svelte

        The web’s efficient UI framework

      • Turborepo

        Speed with Enterprise scale

    • Use Cases
      • AI Apps

        Deploy at the speed of AI

      • Composable Commerce

        Power storefronts that convert

      • Marketing Sites

        Launch campaigns fast

      • Multi-tenant Platforms

        Scale apps with one codebase

      • Web Apps

        Ship features, not infrastructure

    • Tools
      • Marketplace

        Extend and automate workflows

      • Templates

        Jumpstart app development

      • Partner Finder

        Get help from solution partners

    • Users
      • Platform Engineers

        Automate away repetition

      • Design Engineers

        Deploy for every idea

  • Enterprise
  • Pricing
Log InContact
Sign Up
Sign Up
This template is unavailable

Simple Blog with microCMS

[Image blocked: No description]

This is an official microCMS simple blog template.

This blog is built using microCMS, a headless CMS made in Japan, and Next.js.

This template supports authoring and editing the following blog content and information:

  • Blog details
  • Writer
  • Tags

Demo

https://simple-blog-with-microcms.vercel.app/

Configuration

Create an account and a service on microCMS

  1. Create an account on microCMS.
  2. Create a new empty service from the dashboard. When creating the service, please select "Create your own".
  3. Enter any value you like for Service Name and Service ID.
  4. You now have a new service created that you can access!

Create APIs

You will need to create three APIs, all in the list format.

Create tag API.

The tag API is for creating tags associated with blog content. Blog content can have multiple tags set within the tag API.

  1. Go to /create-api (https://your-service-id.microcms.io/create-api) and select "Create your own".
  2. Enter basic API information:
    • API Name: tag
    • Endpoint: tags
  3. Select API Type and choose List Format.
  4. Define API Schema. The tag API has one field:
    • name - Text Field. Field ID and Display Name should be set to name.
  5. Click "Create" and continue.

[Image blocked: No description]

Create writer API

The writer API is for creating author information and associating it with each blog article. A blog article can only have one writer set in the writer API.

  1. Go to /create-api (https://your-service-id.microcms.io/create-api) and select "Create your own".
  2. Enter basic API information:
    • API Name: writer
    • Endpoint: writers
  3. Select API Type and choose List Format.
  4. Define API Schema. The writer API has three fields:
    • name - Text Field. Field ID and Display Name should be set to name.
    • profile - Text Area. Field ID and Display Name should be set to profile.
    • image - Image Field. Field ID and Display Name should be set to image.
  5. Click "Create" and continue.

[Image blocked: No description]

Create blog API

The blog API is for creating blog content.

  1. Go to /create-api (https://your-service-id.microcms.io/create-api) and select "Create your own".
  2. Enter basic API information:
    • API Name: blog
    • Endpoint: blog
  3. Select API Type and choose List Format.
  4. Define API Schema. The blog API has six fields:
    • title - Text Field. Field ID and Display Name should be set to title.
    • description - Text Area. Field ID and Display Name should be set to description.
    • content - Rich Text Editor. Field ID and Display Name should be set to content.
    • thumbnail - Image Field. Field ID and Display Name should be set to thumbnail.
    • tags - Multiple Content References - tag. Field ID and Display Name should be set to tags.
    • writer - Content Reference - writer. Field ID and Display Name should be set to writer.
  5. Click "Create" and continue.

[Image blocked: No description]

Enter Content

  1. Enter content for the tag API, writer API, and blog API. Since the tag API and writer API are referenced from the blog API, please create the blog API content last.

  2. Go to the /apis/[tags|writers|blog]/create endpoint, click "+ Add", enter content for each of the following and click publish:

tag

  • You just need 1 tag content.
  • Use dummy data for the text.

writer

  • You just need 1 writer content.
  • Use dummy data for the text and image.

blog

  • You just need 1 blog content.
  • Use dummy data for the text and image.

[Image blocked: No description]

Running locally

Retrieve API Key

  1. From the top page of the dashboard, Go to "/api-keys".
  2. Copy and retrieve the value of the "default" API Key.

This API key will be used to make requests to microCMS from Next.js.

Set environment variables

Create a .env.local file in the root of the project and enter the following microCMS values:

MICROCMS_API_KEY=xxxxxxxxxx
MICROCMS_SERVICE_DOMAIN=xxxxxxxxxx
BASE_URL=xxxxxxxxxx
  • MICROCMS_API_KEY: Retrieve the API key from the microCMS dashboard under "Service Settings > API Keys".
  • MICROCMS_SERVICE_DOMAIN: Retrieve the service domain from the microCMS dashboard URL (https://xxxxxxxx.microcms.io).
  • BASE_URL: The deployment URL and protocol. For example:
    • Development: http://localhost:3000
    • Production: https://xxxxxxxx.vercel.app

Run the local development server

This application requires Node.js version 24 or later.

  • Install package dependencies
npm install
  • Launch the local development web server
npm run dev
  • Open http://localhost:3000 in your browser and access your local application!

Deploy your project to Vercel

  1. Import your repository from GitHub, GitLab, or Bitbucket.
  2. Click on the environment variables and set MICROCMS_API_KEY, MICROCMS_SERVICE_DOMAIN and BASE_URL.
  3. Click Deploy!

Deploy from Our Template

Alternatively, you can deploy our template by clicking on the Deploy button at the top of this page and setting the same environment variables.

About the Node.js version

This template assumes Node.js 24 or later.

Node.js receives regular security updates. For security reasons, we recommend using the latest patch version of the major version you are using (e.g. 24.x).

For the latest security information, please refer to: https://nodejs.org/en/blog/vulnerability/

Appendix

Page Preview Settings

In order to preview draft content, a page preview must be set up in the microCMS administration page.

Set the following in "API Settings > Page Preview" of the Blog API.

Replace your-domain with your deployed domain. (It also works with localhost)

[Image blocked: No description]

Once set, the page preview button will be available on the content editing page.

Use Cases
Starter
Stack
Next.js
CSS Modules
v0

Build applications with AI

AI SDK

The AI Toolkit for TypeScript

AI Gateway

One endpoint, all your models

Vercel Agent

An agent that knows your stack

Sandbox

AI workflows in live environments

CI/CD

Helping teams ship 6× faster

Content Delivery

Fast, scalable, and reliable

Fluid Compute

Servers, in serverless form

Observability

Trace every step

Bot Management

Scalable bot protection

BotID

Invisible CAPTCHA

Platform Security

DDoS Protection, Firewall

Web Application Firewall

Granular, custom protection

Customers

Trusted by the best teams

Blog

The latest posts and changes

Changelog

See what shipped

Press

Read the latest news

Events

Join us at an event

Docs

Vercel documentation

Academy

Linear courses to level up

Knowledge Base

Find help quickly

Community

Join the conversation

Next.js

The native Next.js platform

Nuxt

The progressive web framework

Svelte

The web’s efficient UI framework

Turborepo

Speed with Enterprise scale

AI Apps

Deploy at the speed of AI

Composable Commerce

Power storefronts that convert

Marketing Sites

Launch campaigns fast

Multi-tenant Platforms

Scale apps with one codebase

Web Apps

Ship features, not infrastructure

Marketplace

Extend and automate workflows

Templates

Jumpstart app development

Partner Finder

Get help from solution partners

Platform Engineers

Automate away repetition

Design Engineers

Deploy for every idea