> 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/1.-installing-the-x2bee-core-package.md).

# 1. Installing the X2BEE-core Package

This document explains how to install and use the x2bee-core package.

***

### What is Data Fetching?

Data fetching refers to the process of retrieving data using APIs and similar means, and is typically handled using JavaScript's native XMLHttpRequest, the Fetch API, or communication libraries such as jQuery's AJAX and Axios.

In versions before Next.js 13, data fetching was done using methods such as `getStaticProps` or `getServerSideProps`, or within component logic in response to user-triggered events.

However, starting with Next.js 13, a distinction was introduced between Server Components and Client Components, which also brought changes to data fetching. Whereas modules such as Axios were previously used, the current Next.js 13 and 14 versions have changed to using the built-in fetch() API by default. (Reference: <https://developer.mozilla.org/en-US/docs/Web/API/Fetch\\_API/Using\\_Fetch>)

Here, we use the `restApiUtil` class, which extends the basic fetch API. It provides a total of three util classes — including the `serverRestApi` and `clientRestApi` classes, which are built for use on this site with added configuration for commonly used headers, tokens, and similar values.

{% hint style="info" %}
In the Next.js 13/14 environment, how fetch is used can differ depending on whether you're in a Server Component or a Client Component, so use `serverRestApi` or `clientRestApi` as appropriate for your environment.
{% endhint %}

### Installing x2bee-core

Follow these steps to add and install the `x2bee-core` package in your project.

{% stepper %}
{% step %}

### Add the dependency to the project's package.json

Add the following entry to the dependencies section of `package.json`:

{% code title="package.json (example)" %}

```json
"dependencies": {
"x2bee-core": "file:src/lib/x2bee-core"
}
```

{% endcode %}
{% endstep %}

{% step %}

### Install the package

After adding the dependency, run the usual package installation command (`npm install`, `yarn install`, etc.) to add `x2bee-core` to `node_modules`.
{% endstep %}
{% endstepper %}

Once the package has been installed successfully, an `x2bee-core` folder will be created inside `node_modules`.

<figure><img src="https://200425-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVEZx3rsZsIv89GPS3d2J%2Fuploads%2F07gvJNsiqO6wIhApAxMs%2Fimg%20(3).png?alt=media&#x26;token=dd14d645-c1bb-419c-aee3-eef5f107c6c1" alt=""><figcaption></figcaption></figure>