## How to integrate Strapi 5 with REST API with Next.js We will use Youtube as an example to create a video upload, read, update, delete (CRUD) application. You can also find the full source code on [github](https://github.com/ZehaIrawan/yt-strapi-nextjs). ``` mkdir youtube && cd youtube npx create-strapi-app@latest backend cd backend && npm run develop ``` And then in another terminal ``` npx create-next-app@latest frontend cd frontend && npm run dev ``` Create video collection Go to the Content-Type Builder, then create a new collection type with the display name of Video, you should get vdeio as singular API ID & videos as plural API ID. ![Create video collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7w3ozd1vu2mualcagqfg.png) Fields: - title => Short text - description => Long text - content => Single Media - user => Relation to Users & Permissions plugin ![User has many videos relation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydalrlmtbluj9z8xa590.png) Now create comment collection with the following fields: - comment => Long text - user => User has many Comments Relation to Users & Permissions plugin - video => Video has many Comments Relation to Video collection ### Configure Collection Permissions Go to Users & Permission plugin => Roles => Public and enable all permission for Video & Comment collection. ![Configure collection permission](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/br0zmlgc64qm5hu2mdyj.png) You should not do this in production for security reason, this is just for demo purpose. #### Creating a Video entry ![Create video entry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pefioalu1mgmoech6s2j.png) ### Testing API Routes ```bash curl -X GET "http://localhost:1337/api/videos?populate=*" ``` By default Strapi will not populate relations. You will need to explicitly populate it, read more about it in [Strapi populate tutorial](https://zehairawan.com/strapi-populate-tutorial). ```json { "id": 3, "documentId": "c9gh48j8v6eaqej0jyodt80h", "title": "Grass", "description": "This is grass", "createdAt": "2024-09-28T03:34:39.129Z", "updatedAt": "2024-09-28T22:07:28.521Z", "publishedAt": "2024-09-28T22:07:28.548Z", "locale": null, "content": { "id": 1, "documentId": "w1mqfpuajo2exi63aicvldri", "name": "grass.mp4", "alternativeText": null, "caption": null, "width": null, "height": null, "formats": null, "hash": "grass_e543b2c814", "ext": ".mp4", "mime": "video/mp4", "size": 42723.2, "url": "/uploads/grass_e543b2c814.mp4", "previewUrl": null, "provider": "local", "provider_metadata": null, "createdAt": "2024-09-28T03:34:32.200Z", "updatedAt": "2024-09-28T03:34:32.200Z", "publishedAt": "2024-09-28T03:34:32.200Z", "locale": null }, "comments": [], "thumbnail": { "id": 2, "documentId": "etcbjcyx1nq0orcxuvo9o5ay", "name": "grass-thumbnail.png", "alternativeText": null, "caption": null, "width": 1906, "height": 1074, "formats": { "thumbnail": { "name": "thumbnail_grass-thumbnail.png", "hash": "thumbnail_grass_thumbnail_aa78312775", "ext": ".png", "mime": "image/png", "path": null, "width": 245, "height": 138, "size": 81.38, "sizeInBytes": 81380, "url": "/uploads/thumbnail_grass_thumbnail_aa78312775.png" }, }, "hash": "grass_thumbnail_aa78312775", "ext": ".png", "mime": "image/png", "size": 727.89, "url": "/uploads/grass_thumbnail_aa78312775.png", "previewUrl": null, "provider": "local", "provider_metadata": null, "createdAt": "2024-09-28T22:04:00.609Z", "updatedAt": "2024-09-28T22:04:00.609Z", "publishedAt": "2024-09-28T22:04:00.610Z", "locale": null }, "localizations": [] } ``` ## Integrate Strapi with Next.js ### GET request (Read) Now let's display the video in the Next.js frontend. Modify `frontend/app/page.js` ```jsx import Link from "next/link"; async function getVideos() { try { const res = await fetch("http://localhost:1337/api/videos?populate=*"); const videos = await res.json(); return videos; } catch (error) { console.error(error); return { error: error.message }; } } export default async function Home() { const response = await getVideos(); return (

Video Gallery

{response.data.map((video) => (

{video.title}

))}

); } ``` It will look like this ![Video gallery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlku06jpxt2gpdg1oueh.png) ### POST request (Create) We will need a way to upload the video, create `frontend/components/UploadComponent.jsx` component. In the example in their documentation in [here](https://docs.strapi.io/dev-docs/plugins/upload#upload-entry-files) Strapi uses documentId, but that doesn't work for me, so I need to use id instead. ```bash Expected a valid Number, got gp1loi2d3mihdq0oiatl54a5 ``` We don't need to set Content-Type to multipart/form-data, browser will automatically set it if you pass FormData. If you set it yourself, it will throw an error. ```jsx "use client"; import React, { useState } from "react"; import { useRouter } from "next/navigation"; export const UploadComponent = () => { const router = useRouter(); const [formData, setFormData] = useState({ title: "", description: "", video: null, }); const createVideo = async (videoId) => { try { const response = await fetch("http://localhost:1337/api/videos", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ data: { title: formData.title, description: formData.description, }, }), }); if (!response.ok) { throw new Error("Network response was not ok"); } const data = await response.json(); return data; } catch (error) { console.error("Error:", error); } }; const handleSubmit = async (event) => { event.preventDefault(); const video = await createVideo(); const videoId = video.data.id; const videoFormData = new FormData(); videoFormData.append("files", formData.video); videoFormData.append("ref", "api::video.video"); videoFormData.append("refId", videoId); videoFormData.append("field", "content"); try { const response = await fetch("http://localhost:1337/api/upload", { method: "POST", body: videoFormData, }); if (!response.ok) { throw new Error("Network response was not ok"); } await response.json(); router.push(`/`); } catch (error) { console.error("Error:", error); } }; const handleChange = (e) => { const { name, value } = e.target; setFormData((prevData) => ({ ...prevData, [name]: value, })); }; const handleFileChange = (e) => { setFormData((prevData) => ({ ...prevData, video: e.target.files[0], })); }; return ( ); }; ``` And then import it in `frontend/app/upload/page.js` ```jsx import { UploadComponent } from "@/components/UploadComponent"; export default async function UploadPage() { return (

This is Upload Page

); } ``` ![Upload video page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuy7xleb37pvzj35cw6m.png) ### PUT request (Update) Modify `frontend/components/UploadComponent.jsx` to accept `isEditing` and `existingVideo` prop. ```jsx "use client"; import React, { useState, useEffect } from "react"; import { useRouter } from "next/navigation"; const UploadComponent = ({ isEditing = false, existingVideo = null }) => { const router = useRouter(); const [formData, setFormData] = useState({ title: "", description: "", video: null, }); useEffect(() => { if (isEditing && existingVideo) { setFormData({ title: existingVideo.title, description: existingVideo.description, }); } }, [isEditing, existingVideo]); const updateVideo = async (videoId) => { try { const response = await fetch( `http://localhost:1337/api/videos/${videoId}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ data: { title: formData.title, description: formData.description, content: { id: existingVideo.content.id }, }, }), }, ); if (!response.ok) { throw new Error("Network response was not ok"); } const data = await response.json(); return data; } catch (error) { console.error("Error:", error); } }; const handleSubmit = async (event) => { event.preventDefault(); if (isEditing) { await updateVideo(existingVideo?.documentId); return; } // ...rest of the code }; return ( ); }; export default UploadComponent; ``` On my first try, I missed that you have to pass the unmodified field in the PUT request body, and that resulted video field being empty. Read more on https://docs.strapi.io/dev-docs/api/rest#update Create `frontend/app/edit/[videoID]/page.jsx` ```jsx "use client"; import { useParams } from "next/navigation"; import Link from "next/link"; import UploadComponent from "../../../components/UploadComponent"; import { useEffect, useState } from "react"; export default function EditPage() { const { videoID } = useParams(); const [video, setVideo] = useState(null); const getVideo = async () => { const response = await fetch(`http://localhost:1337/api/videos/${videoID}?populate=*`); const data = await response.json(); return data; }; useEffect(() => { const fetchVideo = async () => { const video = await getVideo(); setVideo(video.data); }; fetchVideo(); }, []); return (

{`Editing ${video?.title}`}

); } ``` ### DELETE request (Delete) Create `frontend/app/manage/page.js` ```jsx "use client"; import Link from "next/link"; import { useEffect, useState } from "react"; export default function ManagePage() { const [videos, setVideos] = useState([]); const getVideos = async () => { const res = await fetch("http://localhost:1337/api/videos?populate=*"); const videos = await res.json(); setVideos(videos.data); }; useEffect(() => { getVideos(); }, []); const deleteVideo = async (documentId) => { await fetch(`http://localhost:1337/api/videos/${documentId}`, { method: "DELETE", }); setVideos(videos.filter((video) => video.documentId !== documentId)); }; return (

Manage

{videos.map((video) => (

{video.title}

))}

); } ``` We can now delete and edit the video from the manage page. ![Manage page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a34r1h5ox4zvadqe27jt.png)

zehairawan

Integrating Strapi 5 with Next.js with CRUD example

Join Our Newsletter. No Spam, Only the good stuff.