How to Use Supabase in Next.js: A Modern Guide to Building Powerful Web Applications

Published 8th, November, 2022
5 min read
In recent years, there has been a growing trend towards serverless architecture and cloud-based applications. One popular database option for such applications is Supabase, an open-source platform that offers a suite of tools for building scalable and secure applications. In this article, we will explore how to use Supabase with Next.js, a popular React-based framework for building web applications.
Table of Contents:
- What is Supabase?
- Prerequisites
- Setting up Supabase-JS
- Authentication with Supabase
- CRUD Operations with Supabase
What is Supabase?
Supabase is an open-source alternative to Firebase, which provides backend services to build serverless applications. Supabase provides a suite of tools for building scalable and secure applications. It includes an open-source PostgreSQL database, authentication, and real-time subscriptions. It is built on top of Postgres and has a GraphQL-based API.
Prerequisites
Before we begin, you should have a basic understanding of Next.js and React. You should also have a Supabase account and a project set up.
Setting up Supabase-JS
We need to set up Supabase in our Next.js project. We can do this by installing the @supabase/supabase-js
package using npm or yarn.
npm install @supabase/supabase-js
Once installed, we can initialize Supabase in our Next.js project by creating a supabase
object with our Supabase project URL and API key. We can then use this object to interact with our database.
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = "https://<your_supabase_url>.supabase.co";
const supabaseKey = "<your_supabase_api_key>";
export const supabase = createClient(supabaseUrl, supabaseKey);
Authentication with Supabase
Supabase provides various authentication methods, including email and password, Google, Facebook, GitHub, and more. For this example, we will be using email and password authentication. To use email and password authentication, we need to create a sign-up and login form in our Next.js application.
Creating a sign-up form
Next, let's create a sign-up form that allows users to create an account with their email and password.
import { useState } from 'react'
import { supabase } from '../lib/supabase'
function SignUpForm() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
async function handleSignUp(event) {
event.preventDefault()
const { user, error } = await supabase.auth.signUp({
email,
password,
})
if (error) {
console.error(error)
} else {
console.log(user)
}
}
return (
<form onSubmit={handleSignUp}>
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<input
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
/>
<button type="submit">Sign up</button>
</form>
)
}
In this example, we use the useState
hook to manage the state of the email and password input fields. When the user submits the form, we call the supabase.auth.signUp
method to create a new user with the specified email and password.
Creating a sign-in form
Now, let's create a sign-in form that allows users to sign in with their email and password.
import { useState } from 'react'
import { supabase } from '../lib/supabase'
function SignInForm() {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
async function handleSignIn(event) {
event.preventDefault()
const { user, error } = await supabase.auth.signIn({
email,
password,
})
if (error) {
console.error(error)
} else {
console.log(user)
}
}
return (
<form onSubmit={handleSignIn}>
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
/>
<input
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
/>
<button type="submit">Sign in</button>
</form>
)
}
We define a handleSignIn
function that calls the signIn
method on supabase.auth
with the email and password entered by the user. If there's an error, we log the error message. We use the useState
hook to manage the email and password state, and we bind the input fields to their respective state using the value
and onChange
props. Finally, we render an input field for email, an input field for password, and a button to trigger the handleSignIn
function when clicked.
This will return a user
object containing the user's email and other information, which we can use to render personalized content for them.
CRUD Operations with Supabase
Once you have connected your Next.js app with Supabase, you can start performing CRUD (Create, Read, Update, Delete) operations with your database. Here's an example of how to perform these operations using Supabase's JavaScript client library in Next.js:
The first step is to set up a database in Supabase. Here's how you can do that:
- Log in to your Supabase account and click on the "SQL" option on the left side of the screen.
- Click the "New Table" button to create a new table. For this tutorial, we'll create a table named "todos" with the following columns:
id
(type:integer
, constraint:primary key
)title
(type:text
)completed
(type:boolean
)
Create Operation
To create a new record in your Supabase database, you can use the insert()
method. Here's an example of how to create a new user record:
import { supabase } from '../lib/supabase'
const createUser = async (data) => {
const { data: todo, error } = await supabase.from('todos').insert(data).single()
if (error) throw new Error(error.message)
return user
}
In this example, data
is an object containing the data for the new user record. The insert()
method is used to insert this data into the todos
table in the database. The single()
method is used to retrieve only the newly created record.
Read Operation
To retrieve records from your Supabase database, you can use the select()
method. Here's an example of how to retrieve all todo records:
import { supabase } from '../lib/supabase'
const getUsers = async () => {
const { data: todos, error } = await supabase.from('todos').select('*')
if (error) throw new Error(error.message)
return todos
}
In this example, the select()
method is used to retrieve all records from the todos
table in the database.
Update Operation
To update an existing record in your Supabase database, you can use the update()
method. Here's an example of how to update a todo record:
import { supabase } from '../lib/supabase'
const updateUser = async (id, data) => {
const { data: todo, error } = await supabase.from('todos').update(data).match({ id }).single()
if (error) throw new Error(error.message)
return todos
}
In this example, id
is the ID of the todo record to be updated, and data
is an object containing the updated data. The update()
method is used to update the data in the todos
table, and the match()
method is used to specify which record to update.
Delete Operation
To delete a record from your Supabase database, you can use the delete()
method. Here's an example of how to delete a user record:
import { supabase } from '../lib/supabase';
const deleteUser = async (id) => {
const { data: todo, error } = await supabase.from('todos').delete().match({ id }).single()
if (error) throw new Error(error.message)
return todo
}
In this example, id
is the ID of the todo record to be deleted. The delete()
method is used to delete the record from the todos
table, and the match()
method is used to specify which record to delete.
With these examples, you should now have a good understanding of how to perform CRUD operations with Supabase in your Next.js app.
Conclusion
In conclusion, Supabase is a powerful and flexible tool for building modern web applications with Next.js. Its ease of use, strong security features, and support for real-time updates make it an excellent choice for developers looking to build robust and scalable applications. With Supabase and Next.js, you can quickly and easily build applications with complex database functionality, authentication, and authorization, without having to worry about the underlying infrastructure. So, if you're looking for a powerful, modern, and easy-to-use database solution for your Next.js applications, be sure to give Supabase a try.
Get in Touch with Us Today.
Our team is here to help you make your ideas happen and come up with solutions that will help your business grow. Contact us right away to set up a meeting with one of our experts.
Sales Enquiry
sales@mtechzilla.com
Career Enquiry
jobs@mtechzilla.com
Available through : 11am to 8pm (Mon - Fri)