Next.js / Supabase + Next.js тохируулга

Supabase + Next.js тохируулга

Supabase бол PostgreSQL өгөгдлийн сан, нэвтрэлт, file storage зэргийг нэг дор багтаасан backend платформ. Хамгийн чухал нь — үнэгүй tier нь жижиг апп бүтээхэд хангалттай. Энэ хичээлд Supabase болон Next.js-г хэрхэн холбохыг алхам алхмаар сурна.

Supabase төсөл үүсгэх

Эхлээд supabase.com дээр бүртгэл үүсгэж шинэ төсөл нэмнэ. Төсөл үүссэний дараа:

код
Supabase dashboard → Project Settings → API

Дараах утгуудыг хуулж .env.local-д хадгална:

bash
# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xyzabcdef.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

SUPABASE_SERVICE_ROLE_KEY-г хэзээ ч клиентэд ашиглахгүй — зөвхөн серверийн API route дотор.

Package суулгах

bash
npm install @supabase/supabase-js @supabase/ssr

@supabase/ssr нь Next.js App Router-тэй зөв ажиллахаар тусгайлан хийгдсэн package. Cookie-г зөв удирддаг тул session сервер болон клиент хоёуланд ажилладаг.

Серверийн Supabase client

Server Component, Route Handler, Server Action дотор ашиглах client:

typescript
// lib/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 {
            // Server Component дотор cookie тохируулах боломжгүй — зөв үйлдэл
          }
        },
      },
    },
  );
}

Клиент тал дахь Supabase client

Client Component дотор ашиглах client:

typescript
// lib/supabase/client.ts
import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  );
}

Хоёр тусдаа client байгаа шалтгаан: серверийн client нь Next.js-н cookies() функцийг ашиглан session-г cookie-д хадгалдаг. Хөтчийн client нь браузерийн localStorage-г ашиглана.

Хэрэглэх газар бүрт зөв client сонгох

typescript
// ✅ Server Component
import { createClient } from "@/lib/supabase/server";
const supabase = await createClient();

// ✅ Client Component
import { createClient } from "@/lib/supabase/client";
const supabase = createClient(); // await хэрэггүй

// ✅ Route Handler / Server Action
import { createClient } from "@/lib/supabase/server";
const supabase = await createClient();

Энгийн дүрэм: серверт ажиллах бол server.ts, хөтчид ажиллах бол client.ts.

Дараагийн хичээлд:

Supabase Auth ашиглан нэвтрэх, бүртгэх хуудас хийнэ. Email/password нэвтрэлт, session шалгах, хамгаалагдсан хуудас үүсгэх аргыг ойлгоно.

← Өмнөх хичээлEnvironment VariableДараах хичээл →Supabase Auth