## Introduction: Creating a CRUD (Create, Read, Update, Delete) application is a core skill for web developers, and using Next.js with Supabase makes it even easier. In this guide, we'll explore how to build a fully functional CRUD app using Next.js for the frontend and Supabase for the backend. ## Demo: https://next-supabase-crud-eight.vercel.app ## Github: Give it a star⭐️ https://github.com/seifeddinesaad01/Next-Supabase-CRUD ## Requirement: Before we go so far, let’s prepare some software we need. #### Software - npm: (https://www.npmjs.com) - Visual Studio Code: (https://code.visualstudio.com) #### Account - Supabase Account (https://supabase.com) ## 1.Setup Project: ``` $ npm create next-app next14-supabase-crud ``` ## 2.Install Dependencies: ``` $ yarn add @supabase/supabase-js ``` ## 3. Supabase: Create supabase project, fill the form ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pele53fu3blsb8d6f2m.PNG) Then it will redirect into your project detail ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sovaolmoizi2erqdcgyb.PNG) ## 4.Configure Environment Variable: Let’s create .env file, and copy-paste this code below and define variable value based on supabase config. ``` NEXT_PUBLIC_SUPABASE_URL=supabase-url NEXT_PUBLIC_SUPABASE_KEY=supabase-key ``` ## 5. Supabase configuration: Then create supabase configuration file ./config/supabase.js, and copy paste code below. ``` import { createClient } from '@supabase/supabase-js'; const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL; const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_KEY; const supabase = createClient(supabaseUrl, supabaseKey); export default supabase; ``` ## 6. Create Table Posts: Create table named posts and define table column.Don’t forget to uncheck Enable Row Level Security (RLS) to make read and write access public. ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rptix3a1i7uvjldz3503.PNG) Then: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84yijysnr3gdgnoh8hh8.PNG) ## 7. Folder structure : ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ezg2ldgsz8dfs2ttrun.PNG) ## 8. Create Page to List All Posts Update page app/page.tsx and copy paste code below. ``` "use client" import supabase from "../config/supabase"; import Head from "next/head"; import Link from "next/link"; import { useEffect, useState } from "react"; import { CiEdit } from "react-icons/ci"; import { MdDeleteOutline } from "react-icons/md"; import { Empty } from 'antd'; export default function Home() { const [posts, setPosts] = useState([]); const getPosts = async () => { const { data, error } = await supabase.from('posts').select('*'); if (error) { console.error('Error fetching data:', error.message); } else { setPosts(data); } } useEffect(() => { getPosts() }, []) return ( <>

Posts

Create New

{task.title} - {task.description} Edit Delete

}

Post ); } ``` ## 9. Create Page to Create New Tasks Create page app/create/page.jsx and copy paste code below. ``` "use client"; import supabase from "@/config/supabase"; import Head from "next/head"; import { useRouter } from "next/navigation"; // Update this import import { useState } from "react"; export default function Create() { const router = useRouter(); // Use `useRouter` from `next/navigation` const [post, setPost] = useState({ title: "", description: "", }); const onChange = (e: any) => { setPost({ ...post, [e.target.name]: e.target.value }); }; const handleCreate = async () => { try { await supabase.from("posts").upsert([post]); router.push("/"); // This line is fine } catch (error) { console.log(error); } }; return ( <>

Create Post

Create Post ); } ``` ## 10. Create Page to Edit Post Create page app/edit/[id]/edit.tsx and copy paste code below. ``` "use client"; import supabase from "@/config/supabase"; import Head from "next/head"; import { useParams, useRouter } from "next/navigation"; // Use next/navigation for Next.js 13+ import { useEffect, useState } from "react"; interface Task { title: string; description: string; } const Edit = () => { const router = useRouter(); const { id } = useParams(); const [post, setPost] = useState({ title: "", description: "", }); const onChange = (e: React.ChangeEvent) => { setPost({ ...post, [e.target.name]: e.target.value }); }; useEffect(() => { const fetchPost = async () => { if (typeof id === "string") { const { data, error } = await supabase .from("posts") .select("*") .eq("id", id) .single(); if (error) { console.error("Error fetching task:", error.message); return; } if (data) { setPost(data); } } }; if (id) { fetchPost(); } }, [id]); const handleUpdate = async () => { try { if (typeof id === "string") { const { error } = await supabase.from("posts").update(post).eq("id", id); if (error) { console.error("Error updating task:", error.message); return; } router.push("/"); } } catch (error) { console.error("Error:", error); } }; return ( <>

Edit Post

Edit Post ); }; export default Edit; ``` ## 11. Create Page to Delete Posts Create page app/delete/[id]/page.tsx and copy paste code below. ``` "use client" import supabase from "@/config/supabase"; import Head from "next/head"; import Link from "next/link"; import { useParams, useRouter } from "next/navigation"; import { useEffect, useState } from "react"; const Delete = () => { const router = useRouter(); const { id } = useParams(); const [post, setPost] = useState({ title: "", description: "", }); useEffect(() => { const fetchPost = async () => { const { data } = await supabase.from("posts").select("*").eq("id", id); setPost(data); }; if (id) { fetchPost(); } }, [id]); const handleDelete = async () => { try { await supabase.from("posts").delete().eq("id", id); router.push("/"); } catch (error) { console.log(error); } }; return ( <>

Delete Post

Delete Post ); }; export default Delete; ``` ## 12.Result: ``` npm run dev ``` Your website would be like: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de8jlbmy85k7nqr5srdq.PNG) ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6reyqdjog27gqk8knyo.PNG) ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y6qxt8aq8o8f20fmq41.PNG) ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aolir0dc4rkfmft9dueq.PNG) ## Conclusion Congratulations on making it to the end of this guide on creating a CRUD application with Next.js and Supabase! I hope this article has given you a solid foundation and the confidence to build and expand your own web applications using these powerful tools. Thank you for taking the time to read through this tutorial—your interest and engagement mean a lot! If you have any questions, feedback, or want to connect, feel free to reach out on [LinkedIn](https://www.linkedin.com/in/seif-eddine-saad-3728aa19b) or check out more of my projects on [GitHub](https://github.com/seifeddinesaad01). I’d love to hear from you and see what amazing things you build!

seif_eddine_saad

Next JS & Supabase CRUD🚀

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