How to fetch data from Strapi in Next js 13?

#strapi #nextjs #api #cms

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 pagesdirectory, such aspages/index.js, to define the homepage component.
Import theuseSWR hook from the "swr" package and the axioslibrary.
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:3000to 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

Top comments (3)

Evans Kojo Kwofie • Oct 18 '23 • Edited

Good but not all the way there, I feel like it could have been more helpful if you added a way to parse markdown elements in the strapi response payload because more often than not your description will contain some markdown elements that arent easily parsed down. How do you deal with that?