Web Developers: 17-Retrieve Dynamic Supabase Data in Static Next.js Pages

Screenshot from the tutorial

Retrieving Dynamic Supabase Data in Static Next.js Pages

In the world of modern web development, combining the strengths of static site generation with dynamic data retrieval can lead to highly performant and user-friendly applications. One powerful combination is using Supabase, an open-source Firebase alternative, with Next.js, a popular React framework. In this tutorial, we will explore how to retrieve dynamic data from Supabase and display it on static Next.js pages.

What You Will Learn

• Setting up a Supabase project
• Creating a Next.js application
• Fetching data from Supabase
• Displaying dynamic data on static pages

Prerequisites

• Basic knowledge of JavaScript and React
• Familiarity with Next.js
• An account on Supabase

Setting Up Supabase

1. Create a Supabase Account: Go to Supabase and sign up for a new account if you don’t already have one.

2. Create a New Project: After logging in, create a new project. Choose a name, password, and select a region.

3. Set Up Your Database: Once your project is created, navigate to the database section. Let’s create a simple table to store some example data.

   • Go to the "Table Editor" and click on "New Table".
   • Name the table posts and add fields like:
     • id: integer, primary key
     • title: text
     • content: text

4. Insert Sample Data: Populate your posts table with a few entries for testing.

Creating a Next.js Application

1. Setup Next.js: If you haven’t installed Next.js, you can do so by running the following commands:

   npx create-next-app my-next-app
   cd my-next-app
   

2. Install Supabase Client: You will need the Supabase client to interact with your Supabase database. Install it using npm:

   npm install @supabase/supabase-js
   

3. Create a Supabase Client: In your project, create a new file named supabaseClient.js in the root directory and add the following code:

   // 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);
   

   Make sure to add your Supabase URL and Anon Key to your environment variables in a .env.local file:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   

Fetching Data from Supabase

Now that we have our Supabase client set up, we can fetch data from our posts table.

1. Get Static Props: Use the getStaticProps function in a Next.js page to fetch data at build time.

   In pages/index.js, add the following code:

   // pages/index.js
   import { supabase } from '../supabaseClient';
   
   export const getStaticProps = async () => {
     const { data: posts, error } = await supabase
       .from('posts')
       .select('*');
   
     if (error) {
       console.error('Error fetching data:', error);
       return { props: { posts: [] } }; // Return an empty array on error
     }
   
     return {
       props: {
         posts,
       },
       revalidate: 10, // Optional: Regenerate the page every 10 seconds
     };
   };
   
   const Home = ({ posts }) => {
     return (
       <div>
         <h1>Blog Posts</h1>
         <ul>
           {posts.map(post => (
             <li key={post.id}>
               <h2>{post.title}</h2>
               <p>{post.content}</p>
             </li>
           ))}
         </ul>
       </div>
     );
   };
   
   export default Home;
   

Displaying Dynamic Data

Now that we have the data fetched, it's time to display it on the page. The above code already handles rendering the list of posts dynamically using the posts prop.

Running Your Application

To see everything in action, run your Next.js application:

npm run dev

Visit http://localhost:3000 in your browser, and you should see your blog posts displayed from your Supabase database.

Conclusion

In this tutorial, we explored how to retrieve dynamic data from Supabase and display it on static pages in a Next.js application. This combination allows developers to create fast, scalable web applications that can serve real-time data while maintaining the benefits of static site generation.

Feel free to expand on this project by adding features like authentication, pagination, or even more complex queries to your Supabase database. 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