Panduan Lengkap Menghubungkan Supabase dengan Next.js

Dalam dunia pengembangan web modern, integrasi antara backend dan frontend menjadi semakin penting. Dengan munculnya berbagai platform sebagai layanan (PaaS) dan framework yang sesuai, pengembang mencari cara yang efisien untuk membangun aplikasi yang kuat dan scalable. Salah satu kombinasi yang menarik adalah menghubungkan Supabase, yang merupakan alternatif open-source untuk Firebase, dengan Next.js, framework React yang memungkinkan pembuatan aplikasi web cepat. Artikel ini akan memberikan panduan lengkap menghubungkan Supabase dengan Next.js dan membantu Anda dalam prosesnya.

Apa itu Supabase?

Supabase adalah platform backend-as-a-service yang menawarkan banyak fitur, seperti penyimpanan database, otentikasi pengguna, dan penyimpanan file. Ia dibangun di atas PostgreSQL dan memungkinkan pengembang untuk dengan cepat dan mudah membangun aplikasi dengan fungsionalitas yang mirip dengan Firebase tetapi dengan pendekatan open-source.

Kenapa Memilih Next.js?

Next.js adalah framework React yang dirancang untuk membuat aplikasi web yang cepat dengan rendering di sisi server (SSR) dan kemampuan generasi halaman statis (SSG). Dengan arsitektur yang cerdas, Next.js memungkinkan pengembang untuk membuat aplikasi yang memiliki performa tinggi dan SEO yang lebih baik dibandingkan aplikasi React konvensional. Kombinasi antara Supabase dan Next.js semakin menarik untuk dikembangkan karena kesederhanaan serta efisiensinya.

Persiapan Awal

Sebelum kita menyelami cara menghubungkan Supabase dengan Next.js, ada beberapa langkah persiapan yang perlu Anda lakukan.

1. Membuat Akun Supabase

Kunjungi situs resmi Supabase.
Daftar untuk akun baru.
Setelah mendaftar, buat proyek baru. Selama proses ini, Anda akan diberikan URL API dan kunci API yang akan digunakan dalam aplikasi Next.js Anda.

2. Menginstall Next.js

Buka terminal dan buat aplikasi Next.js baru dengan perintah berikut:

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

Setelah proyek Anda dibuat, navigasi ke direktori proyek untuk melanjutkan.

Menghubungkan Supabase dengan Next.js

Setelah proyek Anda siap, langkah selanjutnya adalah menghubungkan Supabase ke aplikasi Next.js yang telah Anda buat.

1. Menginstall Dependensi Supabase

Anda perlu menginstal paket @supabase/supabase-js untuk berinteraksi dengan API Supabase. Jalankan perintah berikut di terminal Anda:

npm install @supabase/supabase-js

2. Mengkonfigurasi Supabase

Buat file baru di direktori proyek Anda untuk mengkonfigurasi Supabase. Misalnya, Anda dapat membuat file supabaseClient.js:

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

Sekarang, Anda perlu memastikan bahwa variabel lingkungan ini sudah diatur. Buat file .env.local di root proyek Anda dan tambahkan informasi berikut:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Gantilah your_supabase_url dan your_supabase_anon_key dengan nilai yang Anda dapatkan saat membuat proyek di Supabase.

3. Mengambil Data dari Supabase

Setelah konfigurasi selesai, sekarang saatnya untuk mengambil data dari Supabase. Anda bisa melakukannya dalam salah satu komponen Next.js. Misalnya, buat file baru pages/index.js dan tambahkan kode berikut:

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

const Home = () => {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    const fetchData = async () => {
      const { data: items, error } = await supabase
        .from('your_table_name')
        .select('*');
      if (error) console.error(error);
      else setData(items);
    };
    
    fetchData();
  }, []);
  
  return (
    <div>
      <h1>Data from Supabase</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li> {/* Gantilah 'name' sesuai dengan kolom Anda */}
        ))}
      </ul>
    </div>
  );
};

export default Home;

Gantilah your_table_name dengan nama tabel yang ingin Anda ambil dari database Supabase.

4. Menambahkan Data ke Supabase

Untuk menambahkan data ke Supabase, Anda bisa membuat fungsi dalam komponen yang sama. Misalnya:

const addData = async (name) => {
  const { data, error } = await supabase
    .from('your_table_name')
    .insert([{ name }]); // Pastikan kolom 'name' ada dalam tabel Anda

  if (error) {
    console.error(error);
  } else {
    setData([...data, ...data]);
  }
};

Anda bisa menghubungkan fungsi addData ini dengan form input untuk mengambil data dari pengguna.

Mengatur Otentikasi Pengguna

Salah satu fitur populer dari Supabase adalah kemampuannya untuk menangani otentikasi pengguna. Mari kita lihat cara menambahkan fungsionalitas otentikasi dalam Next.js Anda.

1. Mengkonfigurasi Otentikasi Supabase

Supabase menawarkan beberapa metode otentikasi. Untuk memulainya, Anda bisa mengkonfigurasi email dan kata sandi. Di file pages/index.js, tambahkan kode berikut:

const [email, setEmail] = useState('');

const handleLogin = async (e) => {
  e.preventDefault();
  const { user, error } = await supabase.auth.signIn({ email });
  if (error) console.error(error);
  else console.log('Logged in:', user);
};

return (
  <form onSubmit={handleLogin}>
    <input 
      type="email" 
      value={email} 
      onChange={(e) => setEmail(e.target.value)}
      placeholder="Enter your email"
      required
    />
    <button type="submit">Login</button>
  </form>
);

Dengan cara ini, Anda sudah memiliki fungsionalitas dasar untuk login pengguna dengan menggunakan email.

2. Menangani Status Autentikasi

Anda juga perlu menangani status autentikasi agar bisa menampilkan konten yang berbeda berdasarkan apakah pengguna sudah masuk atau belum. Gunakan hook useEffect untuk memantau perubahan status otentikasi:

useEffect(() => {
  supabase.auth.onAuthStateChange((event, session) => {
    console.log('Auth state changed:', event, session);
  });
}, []);

Pengujian Aplikasi

Setelah Anda menyelesaikan langkah-langkah di atas, sekarang saatnya untuk menguji aplikasi Next.js Anda yang terhubung ke Supabase. Jalankan perintah berikut di terminal Anda:

npm run dev

Buka browser dan kunjungi http://localhost:3000. Anda akan melihat tampilan aplikasi yang telah Anda buat dengan integrasi antara Supabase dan Next.js.

Kesimpulan

Dengan mengikuti panduan lengkap menghubungkan Supabase dengan Next.js ini, Anda seharusnya sudah berhasil membuat aplikasi sederhana yang bisa mengambil, menambah, dan mengelola data dengan regangan yang minimum. Supabase dan Next.js adalah kombinasi yang mengesankan, menyediakan performa yang baik, kemudahan pengembangan, dan berbagai fitur canggih yang bisa meningkatkan produktivitas Anda. Terus eksplorasi dan kembangkan aplikasi Anda dengan fitur-fitur Supabase lainnya seperti penyimpanan file dan fungsi serverless!

#Sys Admin