Building Full-Stack Apps with Next.js and Supabase

When building modern web applications, Next.js and Supabase are a powerful combination that allows you to create fast, dynamic, and scalable full-stack apps. In this post, we'll explore how to get started with Next.js and Supabase to build a simple yet robust full-stack application.

Why Next.js and Supabase?

Next.js is a React-based framework that provides server-side rendering, static site generation, and API routes, making it an ideal choice for modern web development. Supabase, on the other hand, is an open-source Firebase alternative that offers a complete backend solution, including a Postgres database, real-time subscriptions, authentication, and more.

By using Next.js and Supabase together, you can build fully functioning applications with minimal setup, enabling you to focus on creating great user experiences without worrying about complex backend architecture.

Getting Started

To get started, you'll need to create a new Next.js project and set up a Supabase account. Here's a quick guide to get things rolling:

1. Create a Next.js project:

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

2. Install the Supabase client library:

npm install @supabase/supabase-js

3. Create a Supabase project:

Go to Supabase and create a new project. Once your project is set up, you'll get a unique URL and API key, which you'll use to connect your Next.js app to Supabase.

4. Set up environment variables:

In your .env.local file, add the following environment variables:

NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>

These variables will be used to authenticate your app with Supabase.

Connecting Next.js to Supabase

Now that everything is set up, let's connect your Next.js app to Supabase. Create a new supabaseClient.js file in the root of your project:

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

This file initializes the Supabase client using your project's URL and API key. You can now import supabase into any component or API route in your app to interact with the Supabase backend.

Building a Simple App

Let’s build a simple app where users can add and retrieve posts from the Supabase database.

1. Creating the Posts Table in Supabase:

In your Supabase dashboard, go to the SQL editor and run the following command to create a posts table:

create table posts (
  id serial primary key,
  title text not null,
  content text not null,
  created_at timestamp default now()
);

2. Fetching Data from Supabase:

In app/index.tsx, fetch the posts data from Supabase:

import { useEffect, useState } from 'react';
import { supabase } from '../supabaseClient';
 
export default function Home() {
  const [posts, setPosts] = useState([]);
 
  useEffect(() => {
    async function fetchPosts() {
      const { data } = await supabase.from('posts').select('*');
      setPosts(data);
    }
    fetchPosts();
  }, []);
 
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

3. Inserting Data into Supabase:

Create a simple form to add new posts:

import { useState } from 'react';
import { supabase } from '../supabaseClient';
 
export default function AddPost() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
 
  async function handleSubmit(e) {
    e.preventDefault();
 
    const { data, error } = await supabase
      .from('posts')
      .insert([{ title, content }]);
 
    if (error) {
      console.log('Error inserting data:', error);
    } else {
      console.log('Data inserted:', data);
      setTitle('');
      setContent('');
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
      />
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Content"
      />
      <button type="submit">Add Post</button>
    </form>
  );
}

By following these steps, you've now successfully connected Supabase with your Next.js application and built a simple full-stack app for managing posts.

With the flexibility and performance provided by Next.js, combined with the powerful backend capabilities of Supabase, you can build dynamic and scalable full-stack applications with ease. Happy coding!