Next.js ve Supabase ile eksiksiz bir yığın uygulaması oluşturun

Bir sonraki full-stack uygulamanız için çerçeveler oluşturmak ve seçmek söz konusu olduğunda, Next.js ile Supabase'i birleştirmek bence çalışmak için en iyi seçeneklerden biri.

Supabase, kesintisiz kimlik doğrulama da dahil olmak üzere birçok güçlü araca sahip, açık kaynaklı bir Firebase alternatifidir . Bir geliştirici olarak bu, başarılı bir tam yığın uygulama oluşturmanın anahtarıdır.

Kimlik doğrulamanın yanı sıra Supabase, Postgres veritabanı, gerçek zamanlı abonelikler ve nesne depolama gibi diğer özelliklerle birlikte gelir. Supabase'in başlamak veya entegre etmek için en kolay hizmet olarak arka uçlardan biri olduğuna inanıyorum.

Bu yazıda, Next.js ve Supabase kullanarak full-stack uygulama oluşturmayı öğreneceğiz . Bir Supabase projesinin nasıl kurulacağı, kullanıcı arayüzünün nasıl yapılandırılacağı ve kimlik doğrulama ve işlevlerin nasıl uygulanacağı hakkında konuşacağız.

Bu uygulamanın konsepti, kullanıcıların belirtilen parametrelere göre egzersiz aktivitelerini izlemesi ve oluşturması, herhangi bir hata veya gerekli değişiklik varsa bu aktiviteleri düzenlemesi ve gerekirse silmesidir. Başlayalım!

• Next.js ve Supabase'e Giriş
• Neden Supabase kullanmalıyız?
• Next.js ile projemizi başlatıyoruz
• Bir Supabase projesi kurmak ve bir veritabanı tablosu oluşturmak
• Next.js'yi Supabase veritabanı ile bağlama
• Uygulamamızın kullanıcı arayüzünü yapılandırma
• Kullanıcı kimlik doğrulamasını uygulama
• Egzersiz işlevlerini uygulama
  • Tüm antrenmanlar getiriliyor
  • Yeni bir antrenman oluşturma
  • Antrenman güncelleme
  • Bir antrenmanı silme
• Vercel'e dağıtma

Next.js ve Supabase'e Giriş

Next.js, üretime hazır React uygulamaları oluşturmanın en kolay ve en popüler yollarından biridir. Son yıllarda, Next.js önemli ölçüde üstel bir büyüme yaşadı ve birçok şirket, uygulamalarını oluşturmak için bunu benimsedi.

Neden Supabase kullanmalıyız?

Supabase, PostgreSQL veritabanı üzerine kurulmuş, Firebase'e sunucusuz, açık kaynaklı bir alternatiftir . Tam yığın bir uygulama oluşturmak için gereken tüm arka uç hizmetlerini sağlar.

Bir kullanıcı olarak, tablolar ve ilişkiler oluşturmaktan SQL sorgularınızı ve gerçek zamanlı motorunuzu PostgreSQL'in üzerine yazmaya kadar, veritabanınızı Supabase arayüzünden yönetebilirsiniz.

Supabase, tam yığın uygulama geliştirmenizi daha da kolaylaştıran gerçekten harika özelliklerle birlikte gelir. Bu özelliklerden bazıları şunlardır:

• Satır düzeyinde güvenlik (RLS) – Supabase, veritabanı tablolarınızdaki satırları kısıtlamanıza olanak tanıyan PostgreSQL RLS özelliğiyle birlikte gelir. İlkeler oluşturduğunuzda, bunları doğrudan SQL ile yaratırsınız.
• Gerçek zamanlı veritabanı – Supabase, PostgreSQL veritabanında gerçek zamanlı değişiklikleri dinlemek için kullanılabilecek bir güncelleme özelliğine sahiptir.
• Supabase UI – Supabase, uygulamaları hızlı ve verimli bir şekilde oluşturmak için açık kaynaklı bir kullanıcı arabirimi bileşen kitaplığına sahiptir.
• Kullanıcı doğrulama – Supabase, siz veritabanınızı oluşturur oluşturmaz bir auth.users tablosu oluşturur. Bir uygulama oluşturduğunuzda, Supabase, uygulamaya kaydolduğunuz anda veritabanında referans alınabilecek bir kullanıcı ve kimlik atayacaktır. Oturum açma yöntemleri için e-posta, şifre, sihirli bağlantılar, Google, GitHub ve daha fazlası gibi kullanıcıların kimliğini doğrulamanın farklı yolları vardır.
• Kenar işlevleri – Kenar işlevleri, kullanıcılara yakın, uçta küresel olarak dağıtılan TypeScript işlevleridir. Üçüncü taraflarla entegrasyon veya WebHooks dinleme gibi işlevleri gerçekleştirmek için kullanılabilirler.

Next.js ile projemizi başlatıyoruz

Next.js şablonu ile terminalde projemizi başlatmak için aşağıdaki komutu çalıştıracağız:

 npx oluştur-sonraki-uygulama nextjs-supabase

nextjs-supabase , uygulamamızın Next.js uygulama şablonunu kapsayacağımız klasör adıdır.

Next.js uygulamamıza daha sonra bağlanmak için Supabase istemci paketini yüklememiz gerekecek. Aşağıdaki komutlardan birini çalıştırarak bunu yapabiliriz:

 iplik ekleme @supabase/supababase-js

veya

 npm i @supabase/supabase-js

Uygulamanın kurulumu tamamlandıktan sonra, favori kod düzenleyicinizde klasörü açın. Şimdi, /pages/index.js dosyamızdaki temel şablonu kaldırabilir ve yerine “Welcome to Workout App” yazan bir h1 başlığı koyabiliriz.

Bu yapıldıktan sonra, uygulamanızı http://localhost:3000 adresinde başlatmak için terminalde yarn dev komutunu çalıştırın. Bunun gibi bir sayfa görmelisiniz:

Bir Supabase projesi kurmak ve bir veritabanı tablosu oluşturmak

Bir Supabase projesi oluşturmak için GitHub hesabınızı kullanarak uygulama panosunda oturum açmak üzere app.supabase.com adresini ziyaret edin.

Giriş yaptıktan sonra, Tüm Projeler seçeneğine tıklayarak organizasyonunuzu oluşturabilir ve içinde yeni bir proje oluşturabilirsiniz.

Yeni Proje'ye tıklayın ve projenize bir isim ve veritabanı şifresi verin. Yeni proje oluştur düğmesine tıklayın; projenizin çalışır duruma gelmesi birkaç dakika sürecektir.

Proje oluşturulduktan sonra aşağıdaki gibi bir kontrol paneli görmelisiniz:

Bu eğitim için, daha önce workout-next-supabase.

Şimdi panomuzdaki SQL Editor ikonuna tıklayıp New Query ye tıklayarak veritabanı tablomuzu oluşturalım. Aşağıdaki SQL sorgusunu düzenleyiciye girin ve sorguyu yürütmek için ÇALIŞTIR'a tıklayın.

 CREATE TABLE antrenmanları (
 kimlik birincil anahtarı olarak varsayılan olarak oluşturulan id bigint,
 user_id uuid, auth.users referanslarına boş değil,
 user_email metni,
 başlık metni,
 metin yükler,
 tekrar metin,
 saat dilimi varsayılan saat dilimine sahip eklenmiş_at zaman damgası('utc'::text, now()) boş değil
);

tabloyu değiştir egzersizleri satır düzeyinde güvenliği sağlar;

"Bireyler egzersiz programı oluşturabilir" ilkesini oluşturun. için antrenmanlarda
   kontrol ile ekleyin (auth.uid() = user_id);

"Bireyler kendi antrenmanlarını güncelleyebilir" politikası oluşturun. için antrenmanlarda
   (auth.uid() = user_id) kullanarak güncelleyin;

"Bireyler kendi antrenmanlarını silebilir" politikası oluşturun. için antrenmanlarda
   (auth.uid() = user_id) kullanarak silin;

"Antrenmanlar herkese açıktır" politikası oluşturun. için antrenmanlarda
   (true) kullanarak seçin;

Bu, CRUD uygulamamızı oluşturmak için kullanacağımız egzersiz tablosunu oluşturacaktır.

Tablo oluşturmanın yanı sıra, yalnızca yetkili kullanıcıların antrenmanlarının ayrıntılarını oluşturmasını, güncellemesini veya silmesini sağlamak için satır düzeyinde izinler etkinleştirilecektir.

Antrenman tablosunun nasıl göründüğünü kontrol etmek için, yeni oluşturduğumuz antrenman tablosunu görmek için gösterge tablosundaki Tablo Düzenleyici simgesine tıklayabiliriz.

Bu uygulama için yedi sütunumuz olacak:

• user_id
• user_email
• id
• title
• loads
• reps
• Date stamp

Tablomuz ve sütunlarımız ayarlandıktan sonraki adım, Supabase veritabanımızı Next.js ön uç uygulamamız ile bağlamaktır!

Next.js'yi Supabase veritabanı ile bağlama

Supabase'i Next.js uygulamamıza bağlamak için Proje URL'mize ve Anon Anahtarımıza ihtiyacımız olacak. Bunların her ikisi de veritabanı kontrol panelimizde bulunabilir. Bu iki anahtarı almak için, Ayarlar'a gitmek üzere dişli simgesine tıklayın ve ardından API'ye tıklayın. Bu iki anahtarın şöyle göründüğünü göreceksiniz:

Tabii ki, hassas bilgiler olduğu için bu değerleri tarayıcıda veya depomuzda herkese açık olarak ifşa etmek istemiyoruz. Avantajımıza göre, Next.js, projemizin kökünde bir .env.local dosyası oluşturmamıza izin veren ortam değişkenleri için yerleşik destek sağlar. Bu, ortam değişkenlerimizi yükleyecek ve NEXT_PUBLIC ile önek koyarak bunları tarayıcıya gösterecektir.

Şimdi projemizin kök dizininde bir .env.local dosyası oluşturalım ve dosyaya URL ve anahtarlarımızı dahil edelim.

 .env.yerel

NEXT_PUBLIC_SUPABASE_URL= // proje URL'nizi buraya yapıştırın
NEXT_PUBLIC_SUPABASE_ANON_KEY= // supabase anon anahtarınızı buraya yapıştırın

Not : .env.local sırasında GitHub deposuna gönderilmesini (ve herkesin görebileceği) önlemek için gitignore dosyanıza gitignore dosyasını eklemeyi unutmayın.

Şimdi projemizin kökünde supabase.js isimli bir dosya oluşturarak Supabase client dosyamızı oluşturalım. supabase.js dosyasının içine aşağıdaki kodu yazacağız:

 // supabase.js
"@supabase/supabase-js" den { createClient } içe aktarın;

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

dışa aktarma const supabase = createClient(supababaseUrl, supabaseKey);

Burada, createClient fonksiyonunu içe aktarıyoruz ve supabase adında bir değişken oluşturuyoruz. createClient işlevini çağırırız ve ardından parametrelerimizi iletiriz: URL ( supabaseUrl ) ve Anon Anahtarı ( supabaseKey ).

Artık projemizin herhangi bir yerinde Supabase istemcisini arayabilir ve kullanabiliriz!

Uygulamamızın kullanıcı arayüzünü yapılandırma

Öncelikle, uygulamamızı istediğimiz gibi görünecek şekilde yapılandırmamız gerekiyor. Uygulama ilk yüklendiğinde proje adının ve Giriş ve Kayıt seçeneklerinin bulunduğu bir gezinme çubuğumuz olacak. Bir kullanıcı kaydolup oturum açtığında, Ana Sayfa , Oturumu Kapat ve Antrenman Oluştur düğmelerinin bulunduğu gezinme çubuğunu görüntüleyeceğiz.

Ayrıca web sitesinde her sayfada bir altbilgi olacaktır.

Bunu yapmak için Navbar.js ve Footer.js dosyalarını barındıracak bir component klasörü oluşturacağız. Ardından, _app.js içinde, pages bileşenimizi Navbar ve Footer bileşenleriyle _app.js , böylece bunlar uygulamanın her sayfasında görüntülenecektir.

 // _app.js
Altbilgiyi "../components/Footer"dan içe aktar;
Navbar'ı "../components/Navbar"dan içe aktarın;
içe aktar "../styles/globals.css";

function Uygulamam({ Bileşen, pageProps }) {
 dönüş (
   <div>
     <Gezinme çubuğu/>
     <Bileşen {...pageProps}/>
     <Altbilgi />
   </div>
 );
}

varsayılan MyApp'i dışa aktar;

Kullandığım stiller yanında bu iki bileşenin nasıl göründüğünü görmek için burada bir GitHub özü oluşturdum .

Şimdi, ana sayfamız şöyle görünmelidir:

Kullanıcı kimlik doğrulamasını uygulama

Kullanıcı kimlik doğrulamasını uygulamak için, _app.js dosyamızda kullanıcı durumunu başlatacağız ve bir kullanıcıyı kontrol etmek ve doğrulamak için bir validateUser işlevi oluşturacağız. Ardından, döndürülen oturum nesnesine kullanıcı durumunu ayarlayacağız.

 // _app.js

"tepki" den { useState, useEffect } içe aktar;
Altbilgiyi "../components/Footer"dan içe aktar;
Navbar'ı "../components/Navbar"dan içe aktarın;
içe aktar "../styles/globals.css";
"../utils/supabase" den { supabase } içe aktar;

function Uygulamam({ Bileşen, pageProps }) {
 const [oturum, setSession] = useState(null);

 useEffect(() => {
   setSession(supabase.auth.session());
   supabase.auth.onAuthStateChange((_event, oturum) => {
     setSession(oturum);
   });
 }, []);
 dönüş (
   <div>
     <Navbar oturumu={oturum} />
     <Bileşen {...pageProps} oturumu={oturum} />
     <Altbilgi />
   </div>
 );
}
varsayılan MyApp'i dışa aktar;

Bir kullanıcı uygulamamızın ana sayfasını yüklediğinde, onlara oturum açmalarını veya kaydolmalarını söyleyen bir düğme görüntülemek istiyoruz. Giriş butonu tıklandığında, kullanıcıyı e-posta ve şifresini girebileceği bir sayfaya yönlendirmelidir. Mevcut bir kullanıcıysa ve giriş bilgileri geçerliyse, ana sayfaya yönlendirileceklerdir.

Kullanıcının geçersiz kimlik bilgileri varsa, kullanıcıya sorunu bildirmek için bir uyarı mesajı görüntülenir. Bunun yerine onlara bir kayıt seçeneği gösterilecek.

Kullanıcı kaydolduğunda, girdiği e-postaya bir onay e-postası gönderilecektir. e-postanın gövdesindeki bağlantıya tıklayarak e-postalarını onaylamaları gerekir.

Şimdi, Giriş düğmesine tıkladığımızda, kullanıcı sayfasına şu sayfaya yönlendirilmeliyiz:

Şimdi, Kaydol düğmesine tıklayıp bir e-posta girebiliriz.

Bunu tıkladığımızda, e-posta adresini onaylamak için bir e-posta gönderilecektir. Onayladıktan sonra, bize giriş yapacak ve şöyle bir sayfa görmeliyiz:

Oturum açmadıysak, etkinlik panomuzu göremediğimize, yeni bir antrenman oluşturmak için bir düğme göremediğimize veya oturumu kapatamadığımıza dikkat edin. Bu, Supabase tarafından bize sağlanan, başlangıçta bahsedilen doğrulamaydı!

Egzersiz işlevlerini uygulama

Şimdi, bir kullanıcının antrenmanlarını oluşturma, değiştirme ve silme becerisini oluşturmaya başlayacağız.

Tüm antrenmanlar getiriliyor

Oluşturacağımız tüm antrenmanları almamız ve ana sayfada oluşturmamız gerekecek. Bunu index.js dosyası içinde yapacağız:

 // /sayfalar/index.js
Head'i "sonraki/head"den içe aktar;
Bağlantıyı "sonraki/bağlantıdan" içe aktar;
"tepki" den { useEffect, useState } içe aktar;
stilleri "../styles/Home.module.css" dosyasından içe aktarın;
"../utils/supabase" den { supabase } içe aktar;
WorkoutCard'ı "../components/WorkoutCard"dan içe aktarın;

varsayılan işlevi dışa aktar Ana Sayfa({ oturum }) {
 const [egzersizler, setWorkouts] = useState([]);
 const [yükleniyor, setLoading] = useState(true);

 useEffect(() => {
   fetchWorkouts();
 }, []);

 const fetchWorkouts = zaman uyumsuz () => {
   const kullanıcı = supabase.auth.user();
   denemek {
     setYükleniyor(doğru);
     const {veri, hata } = supabase bekliyor
       .from("egzersizler")
       .seçme("*")
       .eq("user_id", kullanıcı?.id);

     if (hata) atma hatası;
     setWorkouts(veri);
   } yakalama (hata) {
     uyarı(hata.mesaj);
   } en sonunda {
     setYükleniyor(yanlış);
   }
 };

 if (yükleniyor) {
   return <div className={styles.loading}>Antrenmanlar Alınıyor...</div>;
 }
 dönüş (
   <div className={styles.container}>
     <Baş>
       <title>Nextjs x Supabase</title>
       <meta name="description" content="Bir sonraki uygulamayı oluştur tarafından oluşturuldu" />
       <link rel="icon" href="/favicon.ico" />
     </Kafa>

     <div className={styles.home}>
       {!oturum?.kullanıcı ? (
         <div>
           <p>
             Adrenargy'ye hoş geldiniz. Lütfen hesabınıza giriş yapın veya
             bir demo
           </p>
         </div>
       ) : (
         <div>
           <p className={styles.workoutHeading}>
             Merhaba <span className={styles.email}>{session.user.email}</span>,
             Kontrol panelinize hoş geldiniz
           </p>
           {egzersizler?.uzunluk === 0 ? (
             <div className={styles.noWorkout}>
               <p>Henüz antrenmanınız yok</p>
               <Link href="/create">
                 <button className={styles.button}>
                   {" "}
                   Yeni Antrenman Oluştur
                 </button>
               </Link>
             </div>
           ) : (
             <div>
               <p className={styles.workoutHeading}>Antrenmanlarınız burada</p>
               <WorkoutCard verileri={antrenmanlar}/>
             </div>
           )}
         </div>
       )}
     </div>
   </div>
 );
}

Bu bileşende, _app.js dosyasındaki page props'larından geçirdiğimiz session nesnesini yok ediyor ve bunu yetkili kullanıcıları doğrulamak için kullanıyoruz. Kullanıcı yoksa, gösterge tablosu görüntülenmeyecektir. Oturum açmış bir kullanıcı varsa, antrenmanların kontrol paneli görünecektir. Oluşturulmuş bir antrenman yoksa, “Henüz antrenmanınız yok” yazısı ve yeni bir tane oluşturma düğmesi görünecektir.

Oluşturulan antrenmanlarımızı oluşturmak için iki durumumuz var: workouts , boş bir dizi ve boole değerini true olarak alan bir loading durumu. Sayfa yüklendiğinde veri tabanından antrenman verilerini almak için useEffect kullanıyoruz.

fetchWorkouts işlevi, select yöntemini kullanarak veritabanımızdaki egzersiz tablolarından tüm verileri döndürmek için Supabase örneğini çağırmak için kullanılır. . eq() filtre yöntemi, yalnızca geçerli oturum açmış kullanıcıyla eşleşen kullanıcı kimliğine sahip verileri filtrelemek ve döndürmek için kullanılır. Ardından, setWorkouts veritabanından gönderilen verilere ayarlanır ve verilerimizi setLoading tekrar false olarak ayarlanır.

Veriler hala getiriliyorsa, sayfada “Antrenmanlar Alınıyor…” görüntülenmelidir ve veritabanımıza yapılan istek, antrenmanlarımızın dizisini döndürürse, diziyi haritalamak ve WorkoutCard bileşenini oluşturmak istiyoruz.

WorkoutCard bileşeninde, antrenman başlığını, yükünü, tekrarlarını ve oluşturulduğu tarih ve saati oluşturuyoruz. Oluşturulan zaman, buradan kontrol edebileceğiniz date-fns kitaplığı kullanılarak biçimlendiriliyor. Bir sonraki bölümde onları oluşturmaya başladığımızda kartlarımızın nasıl göründüğünü göreceğiz.

 // Workoutcard.js

Bağlantıyı "sonraki/bağlantıdan" içe aktar;
stilleri "../styles/WorkoutCard.module.css" dosyasından içe aktarın;
"react-icons/bs" içinden { BsTrash } içe aktarın;
{ FiEdit } dosyasını "react-icons/fi" dosyasından içe aktarın;
"date-fns/"den { formatDistanceToNow } içe aktarın;

const WorkoutCard = ({ veri }) => {
 dönüş (
   <div className={styles.workoutContainer}>
     {data?.map((item) => (
       <div key={item.id} className={styles.container}>
         <p className={styles.title}>
           {" "}
           Başlık: {""}
           {Ürün başlığı}
         </p>
         <p className={styles.load}>
           {" "}
           Yük(kg): {" "}
           {öğe.yükler}
         </p>
         <p className={styles.reps}>Temsilciler:{item.reps}</p>
         <p className={styles.time}>
           oluşturuldu:{" "}
           {formatDistanceToNow(yeni Tarih(item.inserted_at), {
             addSuffix: doğru,
           })}
         </p>
       </div>
     ))}
   </div>
 );
};

varsayılan WorkoutCard'ı dışa aktar;

Yeni bir antrenman oluşturma

Artık giriş yaptığımıza göre, kontrol panelimiz yeni ve temiz. Yeni bir antrenman oluşturma yeteneğini uygulamak için, sırasıyla pages ve styles klasörüne create.js ve Create.module.css dosyalarını ekleyeceğiz ve biraz mantık ve stil uygulayacağız.

 // /pages/create.js

"../utils/supabase" den { supabase } içe aktar;
"tepki" den { useState } içe aktar;
stilleri "../styles/Create.module.css" dosyasından içe aktarın;
{ userRouter } öğesini "sonraki/yönlendiriciden" içe aktar;

const Oluştur = () => {
 const initialState = {
   Başlık: "",
   yükler: "",
   tekrarlar: "",
 };

 const yönlendirici = useRouter();
 const [workoutData, setWorkoutData] = useState(initialState);

 const { başlık, yükler, tekrarlar } = egzersiz Verileri;

 const handleChange = (e) => {
   setWorkoutData({ ...workoutData, [e.target.name]: e.target.value });
 };

 const createWorkout = zaman uyumsuz () => {
   denemek {
     const kullanıcı = supabase.auth.user();

     const {veri, hata } = supabase bekliyor
       .from("egzersizler")
       .sokmak([
         {
           Başlık,
           yükler,
           tekrarlar,
           user_id: kullanıcı?.id,
         },
       ])
       .bekar();
     if (hata) atma hatası;
     alert("Antrenman başarıyla oluşturuldu");
     setWorkoutData(initialState);
     yönlendirici.push("/");
   } yakalama (hata) {
     uyarı(hata.mesaj);
   }
 };

 dönüş (
   <>
     <div className={styles.container}>
       <div className={styles.form}>
         <p className={styles.title}>Yeni Bir Antrenman Oluşturun</p>
         <label className={styles.label}>Başlık:</label>
         <giriş
           tür = "metin"
           isim = "başlık"
           değer={başlık}
           onChange={handleChange}
           className={styles.input}
           placeholder="Bir başlık girin"
         />
         <label className={styles.label}>Yük (kg):</label>
         <giriş
           tür = "metin"
           name="yükler"
           değer={yükler}
           onChange={handleChange}
           className={styles.input}
           placeholder="Ağırlık yükünü girin"
         />
         <label className={styles.label}>Temsilciler:</label>
         <giriş
           tür = "metin"
           isim = "tekrar"
           değer={tekrar}
           onChange={handleChange}
           className={styles.input}
           placeholder="Tekrar sayısını girin"
         />

         <button className={styles.button} onClick={createWorkout}>
           Antrenman Oluştur
         </button>
       </div>
     </div>
   </>
 );
};

varsayılanı dışa aktar Oluştur;

Burada, temel UI kapsamı, yeni bir antrenman oluşturmak için bir formumuz olacak. Form, veritabanımızı oluştururken belirttiğimiz gibi üç alandan (başlık, yük ve tekrarlar) oluşacaktır.

workoutsData durumuna geçirilen tüm bu alanları işlemek için bir başlangıç durumu nesnesi tanımlanır. onChange işlevi, giriş alanı değişikliklerini işlemek için kullanılır.

createWorkout işlevi, tanımladığımız ilk durum alanlarını kullanarak yeni bir çalışma oluşturmak ve bunu veritabanı tablosuna eklemek için Supabase istemci örneğini kullanır.

Son olarak, yeni antrenmanımız oluşturulduğunda bizi bilgilendiren bir uyarı mesajımız var.

Ardından, antrenmanımız oluşturulduktan sonra form verilerini ilk boş dize durumuna geri ayarladık. Bundan sonra, kullanıcıyı ana sayfaya geri döndürmek için router.push yöntemini kullanıyoruz.

Antrenman güncelleme

Bir antrenmanı güncellemek için, pages klasörümüzde [id].js dosyamızı tutacak olan edit adlı bir klasör oluşturacağız. Antrenman bileşen kartımızda bu sayfaya bağlanan bir düzenleme bağlantısı simgesi oluşturacağız. Kartlar ana sayfada görüntülendiğinde, bu düzenleme simgesine tıklayabiliriz ve bu bizi söz konusu kartın düzenleme sayfasına götürecektir.

Ardından, güncellenmesi gereken antrenman kartının detaylarını, id ve kartın yetkili sahibine göre antrenman tablomuzdan alacağız. Ardından, antrenman kartı ayrıntılarımızı güncellemek için bir updateWorkout işlevi oluşturacağız:

 // /pages/edit/[id].js
{ userRouter } öğesini "sonraki/yönlendiriciden" içe aktar;
"tepki" den { useEffect, useState } içe aktar;
stilleri "../../styles/Edit.module.css" dosyasından içe aktarın;
{ supabase } dosyasını "../../utils/supabase"den içe aktarın;

const Düzenleme = () => {
 const [egzersiz, setWorkout] = useState("");
 const yönlendirici = useRouter();

 const { id } = router.query;
 useEffect(() => {
   const kullanıcı = supabase.auth.user();
   const getWorkout = zaman uyumsuz () => {
     const { veri } = supabase bekliyor
       .from("egzersizler")
       .seçme("*")
       .eq("user_id", kullanıcı?.id)
       .filter("id", "eq", id)
       .bekar();
     setWorkout(veri);
   };
   getWorkout();
 }, [id]);

 const handleOnChange = (e) => {
   setWorkout({
     ...antrenman yapmak,
     [e.target.name]: e.target.value,
   });
 };

 const { başlık, yükler, tekrarlar } = antrenman;
 const updateWorkout = zaman uyumsuz () => {
   const kullanıcı = supabase.auth.user();
   const { veri } = supabase bekliyor
     .from("egzersizler")
     .Güncelleme({
       Başlık,
       yükler,
       tekrarlar,
     })
     .eq("kimlik", kimlik)
     .eq("user_id", kullanıcı?.id);

   alert("Antrenman başarıyla güncellendi");

   yönlendirici.push("/");
 };
 dönüş (
   <div className={styles.container}>
     <div className={styles.formContainer}>
       <h1 className={styles.title}>Antrenmanı Düzenle</h1>
       <label className={styles.label}> Başlık:</label>
       <giriş
         tür = "metin"
         isim = "başlık"
         değer={workout.title}
         onChange={handleOnChange}
         className={styles.updateInput}
       />
       <label className={styles.label}> Yük (kg):</label>
       <giriş
         tür = "metin"
         name="yükler"
         değer={workout.loads}
         onChange={handleOnChange}
         className={styles.updateInput}
       />
       <label className={styles.label}> Temsilciler:</label>
       <giriş
         tür = "metin"
         isim = "tekrar"
         değer={workout.reps}
         onChange={handleOnChange}
         className={styles.updateInput}
       />

       <button onClick={updateWorkout} className={styles.updateButton}>
         Antrenmanı Güncelle
       </button>
     </div>
   </div>
 );
};

varsayılanı dışa aktar Düzenle;

İlk olarak, tablomuzdan alınacak antrenman kartı detaylarını saklamak için bir durum oluşturuyoruz. Ardından, useRouter kancasını kullanarak o kartın id çıkarırız. getWorkout işlevi, o çalışma kartının id filtrelemek için Supabase istemci örneğini çağırır ve verileri (başlık, yükler ve tekrarlar) döndürür.

Antrenman kartı ayrıntıları döndürüldüğünde, .update() işlevini kullanarak ayrıntıları değiştirmek için updateWorkout işlevimizi oluşturabiliriz. Antrenman kullanıcı tarafından güncellendiğinde ve Antrenmanı güncelle düğmesine tıklandığında, bir uyarı mesajı gönderilir ve kullanıcı tekrar ana sayfaya yönlendirilir.

Nasıl çalıştığını görelim.

Düzenleme sayfasına gitmek için düzenle simgesine tıklayın. Başlığı “Dumbell Press”ten “Arm Curl” olarak değiştireceğiz:

Bir antrenmanı silme

Her karttaki bir antrenmanı silmek için, id argüman olarak alacak olan handleDelete işlevini oluşturacağız. kullanarak bir egzersiz kartını silmek için Supabase örneğini çağıracağız.

.delete() işlevi. Bu .eq('id', id) , tabloda silinecek satırın id belirtir.

 const handleDelete = zaman uyumsuz (id) => {
   denemek {


     const kullanıcı = supabase.auth.user();
     const {veri, hata } = supabase bekliyor
       .from("egzersizler")
       .silmek()
       .eq("kimlik", kimlik)
       .eq("user_id", kullanıcı?.id);
     fetchWorkouts();
     alert("Antrenman başarıyla silindi");
   } yakalama (hata) {
     uyarı(hata.mesaj);
   }
 };

eq('user_id', user?.id) olan kartın o belirli kullanıcıya ait olup olmadığını kontrol etmek için kullanılır. İşlev, index.js dosyasındaki WorkoutCard bileşenine iletilecek ve bileşenin kendisinde kullanım için aşağıdaki gibi yapılandırılacaktır:

 const WorkoutCard = ({ data, handleDelete }) => {
 dönüş (
   <div className={styles.workoutContainer}>
     {data?.map((item) => (
       <div key={item.id} className={styles.container}>
         <p className={styles.title}>
           {" "}
           Başlık: {""}
           {Ürün başlığı}
         </p>
         <p className={styles.load}>
           {" "}
           Yük(kg): {" "}
           {öğe.yükler}
         </p>
         <p className={styles.reps}>Temsilciler:{item.reps}</p>
         <p className={styles.time}>
           oluşturuldu:{" "}
           {formatDistanceToNow(yeni Tarih(item.inserted_at), {
             addSuffix: doğru,
           })}
         </p>

         <div className={styles.buttons}>
           <Link href={`/edit/${item.id}`}>
             <a className={styles.edit}>
               <FiDüzenle />
             </a>
           </Link>
           <düğmesi
             onClick={() => handleDelete(item.id)}
             className={styles.delete}
           >
             <BsÇöp />
           </button>
         </div>
       </div>
     ))}
   </div>
 );
};

Kart başarıyla silindiğinde bir uyarı mesajı görüntülenecek ve kullanıcı ana sayfaya yönlendirilecektir.

Vercel'e dağıtma

Şimdi, internetteki herkesin kullanabilmesi için uygulamamızı Vercel'e dağıtmamız gerekiyor!

Vercel'e dağıtmak için önce kodunuzu deponuza göndermeniz, Vercel panonuzda oturum açmanız, Yeni Proje Oluştur'a tıklamanız ve kodunuzu az önce gönderdiğiniz depoya tıklamanız gerekir.

Daha önce oluşturduğumuz ortam değişkenlerini, değerleriyle birlikte ( NEXT_PUBLIC_SUPABASE_URL ve NEXT_PUBLIC_SUPABASE_ANON_KEY ) Ortam Değişkeni alanına girin ve uygulamanızı üretime dağıtmak için Dağıt'ı tıklayın.

Ve işte bizde!

Çözüm

Okuduğunuz için teşekkürler! Umarım bu eğitim size Next.js ve Supabase kullanarak tam yığın bir uygulama oluşturmak için gereken bilgileri verir.

Bu öğretici büyük ölçüde tam yığın bir uygulama oluşturma mantığına odaklandığından, stili kullanım durumunuza göre özelleştirebilirsiniz.

Bu projenin tam deposunu burada ve canlı Vercel bağlantısını burada bulabilirsiniz . Supabase ve Next.js hakkında daha fazlasını okumak isterseniz, belgelerine göz atabilirsiniz.

Next.js ve Supabase ile tam yığın uygulama oluşturun yazısı ilk olarak LogRocket Blog'da göründü.