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 aspages/index.js
, to define the homepage component.
Import theuseSWR
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.
Top comments (3)
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?
Thats a good question, but i do not remember seeing some response like this. Do you have some example?
this is coming from strapi. I needed a way to parse it down to html or something i could render in my UI