جاري التحميل...
جاري التحميل...
@supabase/ssr، Server/Browser clients، Middleware
بعد إنشاء مشروع Supabase الخاص بك، الخطوة التالية هي ربطه بتطبيق Next.js الخاص بك. في هذا الدرس، سنتعلم كيفية تثبيت وتكوين عميل Supabase في مشروعك.
هذه هي المكتبة الأساسية للتفاعل مع Supabase من جانب العميل.
اذهب إلى لوحة تحكم مشروعك → الإعدادات → API. ستجد:
أنشئ ملف .env.local في جذر مشروعك بيانات اعتماد Supabase. لا تُرسل هذا الملف إلى Git أبداً.
أي حزمة npm تحتاج لتثبيتها لـ Supabase؟
أين يجب تخزين مفاتيح Supabase؟
ثبّت Supabase، احصل على مفاتيح المشروع، أنشئ ملف العميل، وتحقق من الاتصال بجلب بيانات من جدول.
الحل:
npm install @supabase/supabase-js @supabase/ssr
# Create .env.local
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
# Create utils/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export async function createClient() {
const cookieStore = await cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{ cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch {} } } }
)
}نقاط رئيسية:
مثال:
npm install @supabase/supabase-js @supabase/ssr
# utils/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export async function createClient() {
const cookieStore = await cookies()
return createServerClient(url, key, {
cookies: {
getAll() { return cookieStore.getAll() },
setAll(cookiesToSet) { /* ... */ }
}
})
}الإجابة:
الإجابة:
فعّل RLS دائماً
بدون RLS، أي شخص يمكنه الوصول لبياناتك