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

Examples with microCMS Template

There are also examples of templates using Next.js's App 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 "App 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. In this case, 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-app-microcms

During this process, you will be prompted with the question, “Would you like to use the recommended Next.js defaults?” so select “Yes, use recommended defaults”.

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

cd next-app-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 appropriate settings are required for the corresponding service.
Set service-domain 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, navigate to the API key list, and copy and paste the created API key.

Fetching and Displaying Information from microCMS

Next, fetch information from the microCMS API created earlier and display it on the screen. Let's edit app/page.js.

import styles from './page.module.css'
import { client } from '@/libs/client'

export default async function Home() {
  const data = await client.get({
    endpoint: 'hello',
  })

  return (
    <main className={styles.main}>
      <div className={styles.center}>{data.text}</div>
    </main>
  )
}

Here, we are fetching data from microCMS within the Home component. This component is called a server component, which is processed only on the server side.
This part of the processing will not be included in the final generated JavaScript.

In this case, we are passing the data fetched from microCMS as data to the template for display.
Access http://localhost:3000 at this point.

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.