Made withStrapiClip

Consume data from Strapi with Next.js

S

Strapi

Creator on the Strapi channel

Watch on YouTube ↗

36K viewsMay 2, 202211:03 runtime

Learn to consume data from a Strapi CMS in a Next.js application by creating a dynamic film listing page. This guide covers key Next.js data fetching concepts, including server-side rendering with `getServerSideProps` and static site generation with `getStaticProps`. Discover…

Chapters

#strapi#clip#cmscrm

Key Concepts: Fetching Strapi Data in Next.js

This guide demonstrates how to create a page in a Next.js application to fetch and display a list of films from a Strapi CMS.

Data Fetching Strategies in Next.js

Next.js offers several powerful data fetching methods suitable for different use cases:

getServerSideProps: For Server-Side Rendering (SSR). Code runs on the server for every request. Ideal for data that changes frequently and must be fresh on every page load.
getStaticProps: For Static Site Generation (SSG). Fetches data at build time. Great for performance and SEO, especially for content that doesn't change often, like data from a headless CMS.
Client-Side Fetching with useSWR: A React hook for client-side data fetching that implements the stale-while-revalidate caching strategy. It first returns stale data from a cache for a fast UI, then sends a request to revalidate and fetches fresh data in the background.

Setting Up the API Connection

To connect to the Strapi API securely and flexibly, a few setup steps are required.

Environment Variables: Store your API endpoint in an environment variable to avoid hardcoding it.
- Create a .env.local file at the root of your project.
- Add the variable, prefixed with NEXT_PUBLIC_ to expose it to the browser.
```
NEXT_PUBLIC_STRAPI_URL=http://localhost:1337/api
```
Important
After creating or modifying a .env file, you must restart your Next.js development server for the changes to take effect.

Reusable Fetcher Function: Create a wrapper around the native fetch API for cleaner, reusable code.

Create a file lib/api.js.
Export an async function that handles fetch requests and JSON parsing.

// lib/api.js
export async function fetcher(url, options = {}) {
  let response;
  if (!options) {
    response = await fetch(url);
  } else {
    response = await fetch(url, options);
  }
  const data = await response.json();
  return data;
}

Rendering the Data

Follow these steps to fetch data and render it within your page component.

Fetch Data in getStaticProps: In your page file (pages/films.js), export getStaticProps to fetch data at build time.

// pages/films.js
import { fetcher } from '../lib/api';

export async function getStaticProps() {
  const filmsResponse = await fetcher(
    `${process.env.NEXT_PUBLIC_STRAPI_URL}/films`
  );
  return {
    props: {
      films: filmsResponse,
    },
  };
}

Pass Data as Props: The films object returned from getStaticProps is passed as a prop to your page component.
```
export default function FilmsPage({ films }) {
  // ...
}
```
Create a Display Component: For better organization, create a separate component to handle the rendering logic.
- This component receives the films prop.
- It maps over the films.data array to display each film's title in a list.
```
// components/Films.js
const Films = ({ films }) => {
  return (
    <ul>
      {films.data.map((film) => (
        <li key={film.id}>
          {film.attributes.title}
        </li>
      ))}
    </ul>
  );
};
```

Setting Up the Films Page Component

Alright, so it is time for us to grab data coming from the Strapi CMS. And in order for us to do that, what we'll do is create a new page. So in the pages folder, I'm going to create films.js and this particular route is going to be responsible for listing the films from our Strapi CMS.

Now, we are going to require the layout. That is for sure. So I'm going to go to the components folder and grab the layout. And we're then going to create a component that I'm going to name FilmsList. And let's see here. Great. And we're just going to do an export default FilmsList. Okay, so that's the basic skeleton code that we're going to be using. And this component of this page essentially is going to return the layout.

And in between the layout, I'm just going to grab some pre-made HTML, and for now, it's just going to say "Films". And now we need to pause a little bit and talk about how to do data fetching in Next.js.

Next.js Data Fetching Strategies: SSR vs. SSG

now if you check the documentation for for next on data fetching you will see that there are a bunch of ways that you can fetch data you can fetch data for server-side rendering for static site generation for client-side rendering for dynamic routes and for incremental static regeneration or isr for short now we're going to talk about each of these options or at least we're going to investigate some of these options so if you want to do server side rendering then the method that you need to use in your Next.js page is called getServerSideProps. So I'm just going to write it out here: export async function getServerSideProps like so. And getServerSideProps as I said is needed when you want to do server-side rendering. So what that means is that any codes that you put in here is going to be run on the server side and it's never going to be executed by the browser. All right.

Understanding getStaticProps and Client-Side Fetching with SWR

The other option that you may have for data fetching is going to be, I'm just going to write it out as well, getStaticProps, like so. Okay, and getStaticProps is for static site generation. So if you export this function, then you basically do enable static site generation for your Next application, or rather for a page. And in this case, the data required to render the page is going to be available at build time ahead of the user's request. And data can come from a headless CMS, for example, right, which is going to be a use case for us potentially.

However, just to let you know, we are going to be using getServerSideProps and not getStaticProps purely because we will also be using this thing called the SWR, which is about client-side rendering. And client-side data fetching is also possible using Next.js, and you can use the useEffect hook in React, or you can use this thing called the SWR, which is stale-while-revalidate.

The Stale-While-Revalidate (SWR) Caching Strategy

And essentially, this is a pattern in Next.js that allows the HTTP cache invalidation strategy to be done fairly automatically by Next.js. And it's really great because what we're going to set up is this SWR strategy which will go and return data from a cache if it's there, so that's the stale. Then it's going to send a fetch request to revalidate the data, and then it's going to come back with some up-to-date data. So it's ideal for things that maybe do update frequently in the client. So maybe, you know, we're going to be adding films to the database quite frequently, and so we want to make sure that that is being listed. So you have a bunch of options, right, to do data fetching.

Choosing a Fetching Method and Planning the Implementation

And in this particular case, we will stick to using getStaticProps. Now in getStaticProps, we need to find a way to go and fetch the appropriate data from the Strapi headless CMS, and then we're going to return that as props, which we will then extract in the FilmsList component definition here for this page. And then we can use that, of course, in our return method. So putting that together, we need to fetch the data right here.

Creating an Environment Variable and an API Fetcher

Now I'm going to do two things. Number one is I'm going to create a .env file and I'm going to create it at the root of my application. And once that .env file is created, what I'm going to do is in my command panel, I just want to make sure that I have "show secrets on," and I'm going to create something called NEXT_PUBLIC_STRAPI_URL, and I'm going to make that equal to http://localhost:1337/api, which is basically the base URL that we have, so that later on if we deploy this, we can just overwrite this with whatever deployment value we're going to get.

And the other thing is that I'm going to take, not that api folder, but rather I'm going to create a folder here at the root of my project and call it lib. And in that lib folder, I'm going to create a file, let's call it api.js, and in here I will export an asynchronous function called the fetcher(url, options = {}). And then we're going to let response, and I say if (!options) { response = await fetch(url) }. So basically, I'm just creating a wrapper around the Fetch API. fetch(url, options). And then I'll just say const data = await response.json() and return data. Right, so just to wrap it around the Fetch API that we have access to here. Awesome.

Fetching Strapi Data with getStaticProps

And so now, let's go back to films. And in here, I'm going to say const filmsResponse, or you could call this whatever you want, and I'm just going to say await and then call this fetcher. And with this, I'm also importing it, and I'm just going to fetch process.env.NEXT_PUBLIC_STRAPI_URL and then we can go /films. Okay, and theoretically, filmsResponse is going to already contain the data that I need. And I'm just going to return props, and the prop that I want to return is called films, and that's going to be equal to the filmsResponse.

Now actually, let's just to verify that things work. So I'm going to log filmsResponse. Now before you run this statement, just make sure that you have the Strapi instance up and running from the previous section of this course, because of course, without that, you will not see any data coming back for this API call. All right. So let's try to launch the films page. So I'm just going to go to /films. All right, I just realized that because I did a .env file, I have to actually stop the npm run dev command and start it again, of course. So just make sure that you stop and restart that, because it won't be able to load that environment variables in the .env file for us.

Verifying the API Response and Passing Props

And as you can see now, if I go to the films page and do refresh, but you already saw that I'm getting some data back. So I get the data back with the IDs and attributes, so this will of course be the response from Strapi along with some pagination information. So this is exactly what we wanted to get. Now the other question is how do we add these props to the FilmsList here? And that's very easy, we're just going to extract films from the props. And once we do that, we should be able to iterate through the films.

Creating a Component to Render the Film List

Okay so films will be now available here, but instead of iterating through the films, we're going to take another approach where we will iterate through them, of course, eventually, but our approach is going to be that we will create a new component. We're going to call that Films.js. And in this particular component, which I'm just going to copy and paste in here, we will accept films and we just return this list here which already has some styles. And then once the films are available, we just iterate through them using a map function, and we return a list item for each film, and then we just print out the title of those films. And so what we can do here in the films page after this H1, I'm just going to say, well, load the Films component and just pass the films like that to that component. Okay, and hopefully if we now visit the application, look at that, we now have the list of our films printed right here.

Reviewing the Result and Next Steps

And of course, I can't yet click on them because obviously, we need to write that functionality. But we now have data being displayed from Strapi itself. So in the next video, we're going to convert this films page so that it will have pagination, and for pagination, we're going to be using the useSWR hook, which is a stale-while-revalidate hook, which I talked about at the beginning of this video.