Web Developers : 4-Fetching Data from Supabase Using Next.js

Screenshot from the tutorial

Fetching Data from Supabase Using Next.js

In the fast-evolving web development landscape, integrating back-end services with front-end frameworks is crucial for building robust applications. One popular combination is Supabase, an open-source alternative to Firebase, and Next.js, a powerful React framework for building server-side rendered applications. In this tutorial, we will explore how to fetch data from a Supabase database using Next.js.

What is Supabase?

Supabase is an open-source backend-as-a-service (BaaS) that provides developers with an easy way to set up a PostgreSQL database, manage authentication, and handle real-time data. It allows you to focus on building your application without worrying about the complexities of managing a server.

Setting Up Your Next.js Project

Before we dive into fetching data from Supabase, you need to set up a Next.js project. If you haven't already, follow these steps:

Step 1: Create a New Next.js App

To create a new Next.js application, run the following command in your terminal:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

Step 2: Install Supabase Client

Next, you need to install the Supabase client library. This library will help you interact with your Supabase database easily.

npm install @supabase/supabase-js

Step 3: Create a Supabase Project

1. Go to the Supabase website and sign up for an account.
2. Create a new project, and note the API URL and the public API key from the project settings, as you will use them to connect your Next.js application to Supabase.

Connecting Next.js to Supabase

Once you have your project set up, you can create a connection to your Supabase database.

Step 4: Create a Supabase Client

Create a new file called supabaseClient.js in the root of your Next.js project:

// supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Step 5: Set Environment Variables

To keep your API keys secure, set environment variables. Create a .env.local file in your project root and add the following:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Step 6: Create a Database Table

In your Supabase project, navigate to the "Table Editor" and create a table. For example, create a posts table with the following columns:

• id (integer, primary key)
• title (text)
• content (text)

Populate the table with some sample data.

Fetching Data in Next.js

Now that you have everything set up, you can fetch data from Supabase in your Next.js application.

Step 7: Create a Page to Display Data

Create a new file called posts.js in the pages directory:

// pages/posts.js
import { useEffect, useState } from 'react';
import { supabase } from '../supabaseClient';

const Posts = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const { data, error } = await supabase
        .from('posts')
        .select('*');

      if (error) {
        console.error('Error fetching posts:', error);
      } else {
        setPosts(data);
      }

      setLoading(false);
    };

    fetchPosts();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Posts;

Explanation of the Code

• We import necessary hooks and the Supabase client.
• The useEffect hook fetches posts from the Supabase posts table when the component mounts.
• We handle loading and error states to improve user experience.
• Once data is fetched, we map through the posts and display them in a list.

Running Your Application

Finally, run your Next.js application:

npm run dev

Visit http://localhost:3000/posts in your browser, and you should see the list of posts fetched from your Supabase database!

Conclusion

In this tutorial, we covered how to set up a Next.js application, connect it to Supabase, and fetch data from a Supabase database. This integration allows you to build powerful web applications with a scalable back-end solution. As you continue to develop your skills, consider exploring more advanced features of Supabase, such as authentication and real-time subscriptions.

Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios