Photo by on Annie Spratt Unsplash Supabase is an open source and helps you to build faster and focus on your products. As someone that likes to test out ideas once in a while, Firebase and Supabase have been interesting to work with. Firebase alternative In this tutorial, I will walk you through an introduction to Supabase, setting up a Database table, creating a simple contact form in Next JS, and putting it all together. I assume you have basic knowledge of Next JS to follow along. To follow along with the Next JS project, on Github. The contact form demo is also . check it out live Supabase Creating a Supabase account is pretty simple. Visit and click on the “Start your project” button. Supabase First, create an organization Next, create a project On the next screen, your project API keys will be displayed. Copy the public key and keep it aside. We will use it later in this tutorial. Copy the URL under the Project Configuration section too. This will be your base URL for the project. Next, we will create a table for the contact form. Create a Database table In the section below, click on Database A blank page will be displayed. Click on the button to create a new table and follow the steps. Add as many columns as you'd like. For the sake of this tutorial, we will create a table named "contacts" with the following columns. Note that the column types are important and the RLS policies section is checked. This controls access to our table. Next, we write a simple policy for our table. Without a row level policy, we will not be able to read, update or delete rows on our table. On our blank table, click on "No active RLS policies" on the extreme right of the table. Create a new policy and select "For full customization". For the sake of this tutorial, we will enable access to all operations on our table. To read more about Row level security, visit this page in the . documentation Follow the steps below. We are all set to create our contact form now. Contact form To follow along with the Next JS project, check it out on . Github Create a simple Next JS project npx create-next-app contact-form
npm install formik yup @supabase/supabase-js We install a few dependencies to help create the contact form and to interact with our supabase table. To start, we create the supabase client in our next JS application using the library. I added the Supabase base URL and our project's public key to the file to be used here. supabase-js .env There is an example file in the github project. .env import { createClient } from "@supabase/supabase-js";

const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);

export default supabase; Next, we create a simple contact form with the following schema ...

const ContactSchema = Yup.object().shape({
    name: Yup.string().max(140, "Too long!").required("Required."),
    email: Yup.string().email("Invalid email.").max(140, "Too long!").required("Required."),
    body: Yup.string().max(280, "Too long!").required("Required."),
});

... Any kind of form works here. I chose formik for convenience. Next, we create the function to interact with our supabase table. handleSubmit The supabase client is used to insert a new row into the exact table we created (contacts). If this works well, you should see the new row on your table. Using React Query Alternatively, you can use this with React Query. First, create a hook Then call the hook inside your contact form, ...

const { mutateAsync: submitFormAsync, isLoading: isSubmittingForm } = useUpdateContacts();

... Then use this in your function instead handleSubmit Conclusion Note that for free accounts on Supabase, the project is paused after 7 days of inactivity. I hope this tutorial helps to get started with supabase. This is part 1 of my Supabase and Next JS series. Till next time... Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

How to Create a Contact Form Using Supabase & Next JS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Reflecting On My Time Mentoring

How to Accelerate Your Golang Backend With Supabase API

30 Next.js Interview Questions: Get Ready for Your Dream Job

5 Reasons to Convert from React to Next.js

6 Easy Steps to Use Next Auth in Next.js 13 Using Route Handler

Reflecting On My Time Mentoring

How to Accelerate Your Golang Backend With Supabase API

30 Next.js Interview Questions: Get Ready for Your Dream Job

5 Reasons to Convert from React to Next.js

6 Easy Steps to Use Next Auth in Next.js 13 Using Route Handler

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps