Uji Kompetensi Supabase Integration
Memeriksa kesiapan menghubungkan Next.js app ke data user dengan client boundary, RLS, service layer, persistence flow, dan profile row yang aman.
Yang dicek
- Memilih lokasi Supabase client sesuai runtime
- Menjelaskan RLS untuk user-owned data
- Menyusun service dan persistence flow yang mengambil identity server-side
- Merancang profile row tanpa mengekspos credential atau hak istimewa
Isi lesson
7 blok- 1.Checkpoint: data user perlu boundary yang jelas di setiap lapisanBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Self-review integration lokalBelum selesaiWajib
- 5.Writing practiceBelum selesaiWajib
- 6.Gunakan dokumentasi sebagai checklist implementationBelum selesaiWajib
- 7.RingkasanBelum selesaiWajib
Checkpoint: data user perlu boundary yang jelas di setiap lapisan
WajibKamu sudah mempelajari lima keputusan yang saling menguatkan: pilih client berdasarkan tempat kode berjalan, gunakan identity check yang dapat dipercaya untuk page dan data, aktifkan RLS dengan policy user-owned, bungkus query dalam service yang jelas, serta simpan data aplikasi pada profile row terpisah dari auth identity.
Uji Kompetensi ini tidak membuat project Supabase atau database sungguhan. Gunakan hasilnya untuk memutuskan apakah kamu siap menerapkan integration di Local Next.js App. Bila kamu belum dapat menjelaskan mengapa service role key tidak pernah masuk browser atau mengapa filter UI tidak menggantikan RLS, kembali ke lesson terkait terlebih dahulu.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Supabase Integration
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 8
Target lulus: 70
Di mana Supabase server client paling tepat dipakai dalam Next.js App Router?
Coding practice
WajibDibuka di workspace khususBuild Supabase integration checkpoint
Susun feature map untuk browser/server client, profile service, user-owned note, RLS, dan secret yang tetap server-only.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Self-review integration lokal
WajibSebelum melanjutkan, lakukan review pada Local Next.js App bila kamu sudah memiliki project Supabase:
- lib/supabase/client.ts dan lib/supabase/server.ts tidak tercampur.
- Publishable URL/key berada di .env.local, sedangkan secret dan service role key tidak masuk browser atau commit.
- Tabel user-owned memiliki RLS dan policy paling sempit untuk operasi yang dibutuhkan.
- Query aplikasi berada di service function, bukan tersebar pada UI.
- Test dua akun memastikan satu user tidak dapat membaca atau mengubah row user lain.
- README menjelaskan lokasi data access tanpa menyertakan credential.
FluentStack tidak dapat menguji dashboard Supabase atau project lokalmu. Tandai selesai berdasarkan pengecekan nyata, bukan karena checklist sudah dibaca.
Bagian ini memengaruhi progres lesson.
Writing practice
WajibLatihan menulis
Tulis catatan implementasi 110-170 kata untuk rekan developer. Jelaskan lokasi browser/server Supabase client, satu tabel user-owned, bagaimana RLS membatasi row, nama service function yang dipakai UI, dan satu hal yang tidak boleh masuk ke browser.
Tulis draft dulu sebelum menandai writing practice selesai.
0/80 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibGunakan dokumentasi sebagai checklist implementation
Buka sumber resmi ini saat menghubungkan Local Next.js App. Baca bagian yang mendukung feature profile atau learning note kecil; jangan langsung memperluas scope ke realtime, storage, atau admin tooling.
Supabase Docs
Creating a Supabase client for SSR
Fokus baca
- browser client versus server client
- NEXT_PUBLIC_SUPABASE_URL dan publishable key
- getClaims untuk perlindungan page dan data
Abaikan dulu
- realtime subscription
- advanced caching behavior
Supabase Docs
Row Level Security
Fokus baca
- RLS pada tabel public
- policy select, insert, dan update untuk auth.uid()
- perbedaan using dan with check
Abaikan dulu
- view security
- policy performance optimization
- advanced role matrix
Supabase Docs
User Management and Profile Data
Fokus baca
- auth.users dan public.profiles
- foreign key ke primary key auth user
- RLS pada profile data aplikasi
Abaikan dulu
- trigger profile otomatis
- admin user management
Next.js Docs
Environment Variables
Fokus baca
- NEXT_PUBLIC_ tersedia di browser
- .env.local tidak di-commit
- server-only value tetap tanpa prefix public
Abaikan dulu
- deployment pipeline dan runtime config tingkat lanjut
Aksi setelah membaca
Tambahkan satu section Data Access pada README Local Next.js App: sebut client boundary, service function, tabel user-owned, dan policy RLS yang dibutuhkan. Tulis nama variable environment saja, tanpa value credential.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Integration yang aman dimulai dari pemisahan browser client, server client, dan service layer.
- RLS membatasi akses row di database dan tetap diperlukan meski UI memiliki filter atau redirect.
- Data user-owned memakai identity yang diverifikasi server-side, bukan userId dari browser.
- Profile aplikasi terpisah dari auth identity serta tidak menyimpan secret atau hak istimewa editable.
- Berikutnya, kamu akan membawa integration ini ke workflow deployment, environment production, dan debugging operasi.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: data user perlu boundary yang jelas di setiap lapisan.