A simple blog, built with Next.js and microCMS.
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:
https://simple-blog-with-microcms.vercel.app/
You will need to create three APIs, all in the list format.
Createtag
API.The tag
API is for creating tags associated with blog content. Blog content can have multiple tags set within the tag API.
/create-api
(https://your-service-id.microcms.io/create-api) and select "Create your own".tag
API has one field:name
- Text Field. Field ID and Display Name should be set to name
.writer
APIThe 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.
/create-api
(https://your-service-id.microcms.io/create-api) and select "Create your own".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
.blog
APIThe blog
API is for creating blog content.
/create-api
(https://your-service-id.microcms.io/create-api) and select "Create your own".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
.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.
Go to the /apis/[tags|writers|blog]/create
endpoint, click "+ Add", enter content for each of the following and click publish:
tag
writer
blog
This API key will be used to make requests to microCMS from Next.js.
Set environment variablesCreate a .env.local
file in the root of the project and enter the following microCMS values:
MICROCMS_API_KEY=xxxxxxxxxxMICROCMS_SERVICE_DOMAIN=xxxxxxxxxxBASE_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:This application requires Node.js version 18 or higher.
npm install
npm run dev
MICROCMS_API_KEY
, MICROCMS_SERVICE_DOMAIN
and BASE_URL
.Alternatively, you can deploy our template by clicking on the Deploy button at the top of this page and setting the same environment variables.
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)
Once set, the page preview button will be available on the content editing page.
A simple blog, built with Next.js and microCMS.
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:
https://simple-blog-with-microcms.vercel.app/
You will need to create three APIs, all in the list format.
Createtag
API.The tag
API is for creating tags associated with blog content. Blog content can have multiple tags set within the tag API.
/create-api
(https://your-service-id.microcms.io/create-api) and select "Create your own".tag
API has one field:name
- Text Field. Field ID and Display Name should be set to name
.writer
APIThe 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.
/create-api
(https://your-service-id.microcms.io/create-api) and select "Create your own".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
.blog
APIThe blog
API is for creating blog content.
/create-api
(https://your-service-id.microcms.io/create-api) and select "Create your own".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
.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.
Go to the /apis/[tags|writers|blog]/create
endpoint, click "+ Add", enter content for each of the following and click publish:
tag
writer
blog
This API key will be used to make requests to microCMS from Next.js.
Set environment variablesCreate a .env.local
file in the root of the project and enter the following microCMS values:
MICROCMS_API_KEY=xxxxxxxxxxMICROCMS_SERVICE_DOMAIN=xxxxxxxxxxBASE_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:This application requires Node.js version 18 or higher.
npm install
npm run dev
MICROCMS_API_KEY
, MICROCMS_SERVICE_DOMAIN
and BASE_URL
.Alternatively, you can deploy our template by clicking on the Deploy button at the top of this page and setting the same environment variables.
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)
Once set, the page preview button will be available on the content editing page.