--- title: "Next.js Blog with microCMS" description: "A simple blog, built with Next.js and microCMS." url: "https://vercel.com/templates/next.js/nextjs-blog-with-microcms" links: repository: "https://github.com/microcmsio/simple-blog-with-microcms" demo: "https://simple-blog-with-microcms.vercel.app/" deploy: "https://vercel.com/new/clone?demo-title=Simple+Blog+with+microCMS&demo-description=This+is+a+microCMS+official+simple+blog+template.&demo-url=https%3A%2F%2Fsimple-blog-with-microcms.vercel.app%2F&project-name=Simple+Blog+with+microCMS&repository-name=simple-blog-with-microcms&repository-url=https%3A%2F%2Fgithub.com%2Fmicrocmsio%2Fsimple-blog-with-microcms&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F74IOxjbkVsyHqfQe05gKua%2Fdccb962dd1d0c8c14dcd065d7998d3b4%2Fmicrocms-thumbnail-1.png&from=templates&env=MICROCMS_API_KEY%2CMICROCMS_SERVICE_DOMAIN%2CBASE_URL" --- # Next.js Blog with microCMS A simple blog, built with Next.js and microCMS. # Simple Blog with microCMS ![](https://github.com/microcmsio/simple-blog-with-microcms/blob/main/public/cover.png?raw=true) 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/ [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-description=This%20is%20a%20microCMS%20official%20simple%20blog%20template.&demo-image=https://github.com/microcmsio/simple-blog-with-microcms/blob/main/public/cover.png?raw=true&demo-title=Simple%20Blog%20with%20microCMS&demo-url=https://simple-blog-with-microcms.vercel.app/&from=templates&project-name=Simple%20Blog%20with%20microCMS&repository-name=simple-blog-with-microcms&repository-url=https://github.com/microcmsio/simple-blog-with-microcms&env=MICROCMS_API_KEY,MICROCMS_SERVICE_DOMAIN,BASE_URL) ## Configuration ### Create an account and a service on microCMS 1. Create an account on [microCMS](https://app.microcms.io/signup). 2. Create a new empty service from the [dashboard](https://app.microcms.io/create-service). 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. ![](https://github.com/microcmsio/simple-blog-with-microcms/blob/main/public/tag.png?raw=true) #### **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. ![](https://github.com/microcmsio/simple-blog-with-microcms/blob/main/public/writer.png?raw=true) #### **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. ![](https://github.com/microcmsio/simple-blog-with-microcms/blob/main/public/blog.png?raw=true) ### 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. ![](https://github.com/microcmsio/simple-blog-with-microcms/blob/main/public/publish.png?raw=true) ### 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 ```bash npm install ``` - Launch the local development web server ```bash npm run dev ``` - Open [http://localhost:3000](http://localhost:3000) in your browser and access your local application! ### Deploy your project to Vercel 1. [Import your repository](https://vercel.com/docs/getting-started-with-vercel/import) 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/ ## About the `.npmrc` Included in This Template This template includes a `.npmrc` file that enables npm's `min-release-age` and `registry` settings. ```ini min-release-age=7 registry=https://npm.flatt.tech ``` The `min-release-age` setting is enabled as part of a software supply chain security strategy. It excludes npm package versions that have been published for less than seven days from being installed. This helps reduce the risk of accidentally installing malicious or compromised packages immediately after they are published. The `registry` setting points npm to [Takumi Guard](https://flatt.tech/takumi/features/guard), an npm security proxy provided by GMO Flatt Security. During `npm install`, Takumi Guard checks packages against a database of known threats and blocks the installation of malicious packages. It works anonymously without requiring an authentication token or any additional configuration. This setting applies not only to local development, but also to dependency updates performed by GitHub Actions and Dependabot. You are free to modify these settings or remove the `.npmrc` file entirely to match your project's requirements and security policies. --- # 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) ![](https://github.com/microcmsio/simple-blog-with-microcms/blob/main/public/page-preview-settings.png?raw=true) Once set, the page preview button will be available on the content editing page. ## Related Templates ### [Blog Starter Kit](https://vercel.com/templates/next.js/blog-starter-kit) A statically generated blog example using Next.js and Markdown. ### [Next.js Boilerplate](https://vercel.com/templates/next.js/nextjs-boilerplate) Get started with Next.js and React in seconds. ### [Next.js Blog with Draft Mode](https://vercel.com/templates/next.js/nextjs-blog-draft-mode) Static blog with Preview Mode, built with Next.js and Contentful. --- ## Additional documentation The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.