Website Next.js + Supabase

Project sederhana untuk membuat dan menampilkan daftar post menggunakan Next.js (App Router) dan Supabase.

Simple project to create and display posts using Next.js (App Router) and Supabase.

Bahasa | Language

• Indonesia
• English

Table of Contents

• Preview
• Fitur
• Tech Stack
• Struktur Singkat
• Menjalankan Project di Lokal
• Setup Database Supabase
• Script NPM
• Deploy

Indonesia

Versi ringkas dokumentasi dalam Bahasa Indonesia ada di setiap sub-bagian bertanda "Indonesia".

English

An English version is included in each section marked "English".

Preview

Fitur

Indonesia

• Menampilkan daftar post dari tabel posts (urut terbaru).
• Menambah post baru dari form input.
• Integrasi client-side ke Supabase dengan @supabase/supabase-js.
• Dibangun dengan Next.js 16 + React 19 + TypeScript.

English

• Display posts from the posts table (newest first).
• Add a new post from the input form.
• Client-side integration with Supabase using @supabase/supabase-js.
• Built with Next.js 16 + React 19 + TypeScript.

Tech Stack

• Next.js 16
• React 19
• TypeScript
• Supabase
• Tailwind CSS 4

Struktur Singkat

app/
	page.tsx           # Halaman utama + form + list post
lib/
	supabase.ts        # Inisialisasi Supabase client

Menjalankan Project di Lokal

Indonesia

1. Clone repository ini.
2. Install dependency:

npm install

3. Buat file .env.local lalu isi:

NEXT_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT_ID.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY

Catatan:

• Alternatif key yang didukung oleh kode saat ini: NEXT_PUBLIC_SUPABASE_ANON_KEY.
• Jangan commit file .env atau .env.local ke repository.

4. Jalankan development server:

npm run dev

5. Buka http://localhost:3000.

English

1. Clone this repository.
2. Install dependencies:

npm install

3. Create a .env.local file and fill it with:

NEXT_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT_ID.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY

Notes:

• Supported alternative key in current code: NEXT_PUBLIC_SUPABASE_ANON_KEY.
• Do not commit .env or .env.local to the repository.

4. Run the development server:

npm run dev

5. Open http://localhost:3000.

Setup Database Supabase

Indonesia

Pastikan ada tabel posts dengan kolom minimal:

• id (number / bigint, primary key)
• title (text)
• created_at (timestamp, default now())

Contoh SQL:

create table if not exists public.posts (
	id bigint generated always as identity primary key,
	title text not null,
	created_at timestamp with time zone default now() not null
);

English

Make sure you have a posts table with at least these columns:

• id (number / bigint, primary key)
• title (text)
• created_at (timestamp, default now())

SQL example:

create table if not exists public.posts (
	id bigint generated always as identity primary key,
	title text not null,
	created_at timestamp with time zone default now() not null
);

Script NPM

npm run dev    # Jalankan app mode development
npm run build  # Build production
npm run start  # Jalankan hasil build
npm run lint   # Linting dengan ESLint

Deploy

Project ini dapat dideploy ke Vercel dengan menambahkan environment variable Supabase yang sama seperti di lokal.

This project can be deployed to Vercel by adding the same Supabase environment variables used in local development.