How to fetch data from Strapi API in server side Next.js 14

Introduction to Next.js and Strapi

Next.js and Strapi are two powerful tools in the modern web development ecosystem. Next.js is a React framework that enables the creation of server-side rendered (SSR) and statically generated React applications, while Strapi is a flexible headless CMS (Content Management System) that allows developers to build APIs quickly and efficiently. In this article, we'll explore how to fetch data from a Strapi API on the server-side in a Next.js application.

Server-side Data Fetching in Next.js

In Next.js, server-side data fetching is typically performed using the getServerSideProps function. This function runs on the server side and fetches data before rendering the page, ensuring that the data is available when the page is rendered. By fetching data on the server side, you can improve performance and ensure that your content is SEO-friendly.

Fetching Data from Strapi API

To fetch data from a Strapi API in Next.js, you can use the fetch API or a library like Axios. Simply make an HTTP request to the desired Strapi endpoint, and parse the JSON response. You can then pass the fetched data to your Next.js components for rendering.

step 1:

create a Strapi project :

npx create-strapi-app my-app --quickstart\n

documentation strapi

step2 :

create Next.js app :

npx create-next-app@latest\n

step 3:

Preparing the environment variables:

Next.js has support for loading environment variables into your project. Simply create a .env.development file at the root of the frontend folder and paste in this snippet:

NEXT_PUBLIC_BASE_URL=http://localhost:1337\nNEXT_PUBLIC_REST_API_KEY=bc8700420ab5627c5cd5c7710fda91af350246d231b3e4d7a637f90f16744d19935db928b5611032667b70246a30c5975f393c817259d9f33ab6554337ebb6d8b65d92986cd1feaa96baa830922734ef64cc2c2100a44bcfacb42e31fd1f32829b9698fe009cfcf372efa9587e690021f8bd21d3a9e205d7f77b5b0577a7d387\n

this a example API_KEY you can get one from your project by adding new API token and get your private key

step 4 :

create a app/utils folder in inside the folder create a file AxiosFetching.js

const { default: axios } = require(\"axios");
const apiKey = process.env.NEXT_PUBLIC_REST_API_KEY;\nconst apiUrl = \"http://localhost:1337/api\";
//api tokens options
const axiosClient = axios.create({baseURL: apiUrl,headers: {
 Authorization: `Bearer ${apiKey}`}});
// fetch All product
const getProducts = async () => {
const headers = {Authorization: `Bearer ${apiKey}`,};
const response = await axios.get(`${apiUrl}/products?populate=*`, {
 headers });
const data = response.data.data;
return data
export default { getProducts  };

step 5 :

create a products folder app/products inside products page create page.js:

import React from \"react\";
import AxiosClient from "@/app/utils/AxiosClient\";
export default async function page() {
 const product = await AxiosClient.getProducts();
 return (
    <div className="font-[sans-serif] bg-light"><h1>Single page</h1><div className="grid grid-cols-3 gap-10 items-center p-6">
        {product.map((item)=>{
        //fetch data here})}
     </div></div>
)}

Conclusion:

Fetching data from the Strapi API in a Next.js application allows you to build dynamic and interactive web applications with ease. By leveraging the server-side rendering capabilities of Next.js, you can improve performance and SEO while maintaining a great user experience. Experiment with fetching data from various endpoints of the Strapi API and see how you can enhance your Next.js application.