This document outlines the steps to use microCMS with Next.js's Pages Router.
If you are using microCMS from Next.js's Pages Router for the first time, please try these steps first.

Examples with microCMS Template

There are also examples of templates using Next.js's Pages Router in the microCMS template.

You can quickly try out a pre-built environment with just one click, so please refer to this as well.
Search results for "Pages Router" | microCMS Templates

The following describes how to set up on your own.

Things to Confirm in Advance

• You will need Node.js and npm to develop with Next.js. Please install them in your development environment.
• You must have completed the creation of the microCMS service. If you haven't done this, please refer to the documentation below.

Setting Up microCMS

First, let's create a simple API with microCMS.

• Object format
• One text field

In the API creation screen, enter a desired API name and Endpoint.

Next, select the object format.

Finally, set the fields. This time, we will set only one Text Field.

With the above settings, the API will be created, allowing you to submit content.
Move to the editing screen, enter the desired values, and publish.

At this point, a response containing content data will be returned from the API.
Click on the API Preview in the upper right corner to access the created API and confirm that a JSON response is being returned.

Preparing the Next.js Project

Next, create a Next.js project using the official CLI provided by Next.js. Let's run the following command.

npx create-next-app next-microcms

During this process, you will be prompted with the question “ Would you like to use the recommended Next.js defaults?” Choose “ No, customize settings”.

After that, several options will appear, but for the question “Would you like to use App Router? (recommended)”, select “No” and choose the default options for the others.

If the operation is successful, the project creation will be complete.
Navigate to the corresponding directory and start the development server.

cd next-microcms
npm run dev

Then, access http://localhost:3000 from your browser.
If the server has started successfully, the initial screen will be displayed in the browser as shown below.

Initializing microcms-js-sdk

Next, install the SDK (microcms-js-sdk) for communication with the microCMS API.

$ npm install microcms-js-sdk

Then, create a new libs folder and create a client.js file inside it.

$ mkdir libs
$ touch libs/client.js

Write the following content in the file.

import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: 'service-domain', 
  apiKey: 'api-key',
});

Here, we will perform the initial configuration of the SDK.
service-domain and api-key will have different values for each service, so you need to configure them according to the relevant service.
service-domain should be set to the XXXX part of the created service “https://XXXX.microcms.io”. Copy and paste the string of the automatically created API Key into api-key. Select “1 API Key” at the bottom of the sidebar to move to the API Key list, and copy and paste the created API Key.

Fetching and Displaying Information from microCMS

Next, we will fetch information from the microCMS API created earlier and display it on the screen. Let's edit pages/index.js.

import Head from 'next/head'
import styles from '@/styles/Home.module.css'
import { client } from '@/libs/client'

export default function Home({ data }) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <div className={styles.center}>{data.text}</div>
      </main>
    </>
  )
}

export const getStaticProps = async () => {
  const data = await client.get({
    endpoint: 'hello',
  })

  return {
    props: {
      data,
    },
  }
}

Here, we are using getStaticProps to fetch data from microCMS. This is a function that is called on the server side at build time.
This part of the process is not included in the final generated JavaScript. It is a necessary feature to fetch data only at build time and output static HTML.

This time, we are passing the data fetched from microCMS as data to the template for display.
Access http://localhost:3000 in this state.

If it is displayed as shown above, you have successfully connected the data with microCMS.
Try changing the content submitted to microCMS and see if the displayed content changes as well.