AI Vision OCR (Next.js + Supabase)

Panduan ini fokus ke deploy stack aktif saat ini: Next.js App Router + Supabase.

1) Prasyarat

• Akun Supabase
• Akun Vercel
• API key 9Router
• Node.js 20+

2) Siapkan environment variable

Salin .env.example menjadi .env.local untuk lokal:

Copy-Item .env.example .env.local

Isi nilainya:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
SUPABASE_DOCUMENTS_BUCKET=documents
NINEROUTER_BASE_URL=https://api.9router.com/v1
NINEROUTER_API_KEY=
APP_ENV=production
MAX_UPLOAD_BYTES=20971520
CACHE_TTL_DAYS=30
REQUIRE_AUTH=1

3) Setup Supabase (database + auth + storage)

3.1 Apply migration SQL

1. Buka Supabase Dashboard → SQL Editor.
2. Jalankan isi file: supabase/migrations/0001_initial.sql.

3.2 Buat bucket dokumen

1. Supabase Dashboard → Storage.
2. Buat bucket bernama documents.
3. Set bucket sebagai private.

3.3 Buat user pertama

1. Supabase Dashboard → Authentication → Users → Add user.
2. Isi email dan password.
3. Ambil user id dari user tersebut.
4. Tambahkan row ke tabel profiles:
   • id = user id dari Auth
   • email = email user
   • name = nama tampilan
   • role = admin atau staff

4) Verifikasi lokal sebelum deploy

npm install
npm run typecheck
npm run build
npm run self-check

Semua command di atas harus lulus.

5) Deploy ke Vercel

1. Push repository ke Git provider (GitHub/GitLab/Bitbucket).
2. Import repo ke Vercel sebagai project baru.
3. Framework: Next.js (auto-detect).
4. Tambahkan semua env dari langkah 2 di Vercel (Production environment).
5. Deploy.

6) Smoke test sesudah deploy

Ganti YOUR_APP_URL dengan domain production Anda.

1. Health check:

   GET https://YOUR_APP_URL/api/health
   

2. Login melalui UI menggunakan user yang ada di Supabase Auth + profiles.

3. Upload 1 dokumen valid (JPG/PNG/WEBP/PDF, ukuran < MAX_UPLOAD_BYTES).

4. Pastikan hasil OCR muncul.

5. Edit 1 field lalu simpan verifikasi.

6. Cek data masuk ke tabel Supabase:

   • ai_logs
   • ai_results
   • ai_cache

7) Checklist siap digunakan (production)

• APP_ENV=production
• REQUIRE_AUTH=1
• Bucket documents private
• Semua env terisi di Vercel
• npm run build lulus
• GET /api/health tidak error
• Login berhasil
• Upload + ekstraksi berhasil
• Simpan verifikasi berhasil
• Data tercatat di Supabase

8) Troubleshooting cepat

• Login sukses tapi API 401/403: cek row profiles user.
• Gagal upload ke storage: cek bucket documents dan policy bucket.
• API 500: cek env SUPABASE_SERVICE_ROLE_KEY dan NINEROUTER_API_KEY di Vercel.
• OCR error: cek key/quota 9Router dan NINEROUTER_BASE_URL.
• Build gagal: jalankan ulang npm run typecheck dan npm run build di lokal.