Next.js 15 + RSC + AI Coding: Build a Smart Notes App (Practical, Production-minded)

EN + ID guide for frontend engineers

Kalau kamu frontend engineer yang lagi ngejar stack modern, kombinasi Next.js App Router + React Server Components + PostgreSQL + AI coding workflow itu sekarang sweet spot banget: cepat, scalable, dan DX-nya enak.

Di post ini, kita bikin project nyata: Smart Notes — app catatan yang bisa:

simpan notes ke Postgres,
full-text search,
auto-summary (AI-assisted flow),
render cepat via RSC,
write operations aman via Server Actions.

Why this topic now? (Tech update singkat)

2026 trend check (practical):

RSC patterns makin mature → boundary client/server makin jelas.
Server Actions dipakai lebih luas untuk mutation sederhana tanpa bikin REST boilerplate banyak.
AI coding workflow shifting dari “generate code sekali” ke “iterative reviewer/copilot” + guardrails.
Postgres + pgvector/full text tetap backbone untuk app knowledge-centric.

Step 1: Arsitektur Data (Prisma + Postgres)

Kita mulai dengan schema simple.

JavaScript
model Note {
  id        String   @id @default(cuid())
  title     String
  content   String
  summary   String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

Step 2: RSC untuk Data Fetching

Di Next.js 15, fetching data di Server Component itu default. No more useEffect buat initial load.

TypeScript
// app/notes/page.tsx
import { db } from '@/lib/db';

export default async function NotesPage() {
  const notes = await db.note.findMany({
    orderBy: { createdAt: 'desc' }
  });

  return (
    <main>
      <h1>My Smart Notes</h1>
      <div className="grid gap-4">
        {notes.map(note => (
          <NoteCard key={note.id} note={note} />
        ))}
      </div>
    </main>
  );
}

Step 3: Server Actions untuk Mutation

Update data tanpa API route manual.

TypeScript
// app/actions.ts
'use server';
import { db } from '@/lib/db';
import { revalidatePath } from 'next/cache';

export async function createNote(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;

  await db.note.create({
    data: { title, content }
  });

  revalidatePath('/notes');
}

Step 4: AI Summary Workflow

Gunakan AI SDK (misal Vercel AI SDK) untuk generate summary otomatis saat note disimpan.

Takeaway: User experience jadi premium tanpa effort besar di FE.

Kesimpulan

Stack ini bukan cuma soal tren, tapi soal kecepatan development. Dengan Next.js 15, kita dapet performa server-side dengan kenyamanan coding ala client-side.

Gas cobain di repo kalian!