How to fetch data from Strapi in Next js 13?
Tags: strapi, nextjs, api, cms
Published: 2023-05-25 16:50:27

Strapi and Next.js are both powerful tools for building web applications. Strapi is a headless CMS (Content Management System) that provides a flexible API for managing content, while Next.js is a React framework for building server-side rendered and static websites. Integrating Strapi's API with Next.js allows you to fetch data from your Strapi backend and use it in your Next.js application.
**Here's a step-by-step guide on how to set up a Strapi API with Next.js:**

**1. Set up a Strapi backend:**

- Install Strapi globally by running `npm install strapi@latest -g`
- Create a new Strapi project by running `strapi new my-project` in your terminal. Replace "my-project" with the desired name for your project.
- Follow the prompts to select your database (e.g., MongoDB, PostgreSQL, SQLite) and configure your project.
- Once the setup is complete, navigate to the project folder using cd my-project and start the Strapi server with `strapi start`.

**2. Create an API in Strapi:**

- Access the Strapi admin panel by visiting 

```
http://localhost:1337/admin
```
 in your browser.
- Create a new content type by going to the "Collection Types" section and clicking on the "Create new collection type" button.
- Define your content type's fields and save it.

**3. Set up Next.js:**

- Create a new Next.js project by running `npx create-next-app my-next-project` in your terminal. Replace "`my-next-project`" with the desired name for your project.
- Change to the project directory using `cd my-next-project`.

**4. Install dependencies:**
tall the required dependencies by running `npm install axios` to handle HTTP requests and `npm install swr` for data fetching in Next.js.

**5. Fetch data from the Strapi API:**
In your Next.js project, create a new file under the `pages `directory, such as` pages/index.js`, to define the homepage component.
Import the` useSWR` hook from the "swr" package and the `axios `library.
In the component, use the `useSWR` hook to fetch data from the Strapi API endpoint. 

For example:

```
import useSWR from 'swr';
import axios from 'axios';

const fetcher = (url) => axios.get(url).then((res) => res.data);

const HomePage = () => {
  const { data, error } = useSWR('http://localhost:1337/api/my-content-type', fetcher);

  if (error) return <div>Error loading data...</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default HomePage;


```

**6. Start the Next.js development server:**

- Run `npm run dev` in your terminal from the root of your Next.js project.
- Open your browser and access `http://localhost:3000 `to see your Next.js application with data fetched from the Strapi API

That's it! You now have a Next.js application that fetches data from a Strapi API. Feel free to customize the code according to your specific requirements and content types in Strapi.

[see how to fetch data from strapi on server side](https://www.medcode.dev/blogs/next.js-fetch-data-strapi-api)