> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/04.-data-fetching/3.-using-the-common-restapi-util-for-next.js.md).

# 3. Using the Common RestApi Util for Next.js

This document explains how to fetch data using the RestApi util for Next.js.

In Next.js, the way restApiUtil is used differs slightly depending on whether you're in a Server Component or a Client Component. We also provide a RestApi Util built for next(react) that adds common functionality repeatedly used within Next.js.

* Both versions include functionality that is common across the site (business logic), such as retrieving the token from a cookie value and adding it automatically.
* The Server Component version uses the Server Action feature internally.
* The Client Component version uses React Hook functionality internally.

{% stepper %}
{% step %}

### Server Component

Since Server Components return a Promise, you can handle them using the then/catch pattern or async/await syntax. The example below uses async/await.

{% code title="app/page.tsx (Server Component example)" %}

```javascript
import { restApi } from '@/lib/common/plugins/restApi';

const Home = async () => {
  const response = await restApi.get('/api/display/v1/shop/1?dispMediaCd=20');
  console.log(response);

  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;
```

{% endcode %}

In Server Components, the Server Action feature is used internally.
{% endstep %}

{% step %}

### Client Component

In Client Components, data is fetched using React Hooks. It's common to call an async function inside useEffect or an event handler.

{% code title="app/page.tsx (Client Component example)" %}

```javascript
'use client';
import { useEffect } from 'react';
import { restApi } from '@/lib/common/plugins/restApi';

const Home = () => {
  useEffect(() => {
    const apiFunc = async () => {
      const response = await restApi.get('/api/display/v1/shop/1?dispMediaCd=20');
      console.log(response);
    };
    apiFunc();
  }, []);

  async function apitest() {
    const response = await restApi.get('/api/display/v1/shop/1?dispMediaCd=20');
    console.log(response);
  }

  return (
    <div>
      <h1>Home</h1>
      <button onClick={() => apitest()}>api test</button>
    </div>
  );
};

export default Home;
```

{% endcode %}

Client Components use a React Hook-based implementation internally.
{% endstep %}

{% step %}

### How to Write APIs for x2bee Standards and Management

<div align="left"><figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2Fb6AA7zmlhFPi6LLj83qZ%2Fimg%20(7).png?alt=media&#x26;token=afa3cfe4-7c02-4988-8c6c-fd88cc433a45" alt="" width="347"><figcaption></figcaption></figure></div>

Rather than writing an API individually for each screen, we recommend creating an api directory within the project and separating files by task or by API. This helps reduce duplicate code and keeps related APIs managed together for consistency.

Example:

{% code title="src/api/categoryApi.ts" %}

```javascript
import { restApi } from '@/lib/common/plugins/restApi';
import { DisplayCategory } from '@/types/display/category-data-model';
import { ResponseEntity } from '@/lib/common/plugins/restApi/restApiModel';

const CategoryApi = async (params?: { brandNo: string }) => {
  const response: ResponseEntity = (await restApi.get(
    '/api/display/v1/displayCategory',
    { params }
  )) as ResponseEntity;

  return (response.payload || []) as DisplayCategory[];
};

export default CategoryApi;
```

{% endcode %}
{% endstep %}
{% endstepper %}