Setup Next.js dan antek-antek

setup-next-js-and-other.md

Next.js

Install Next.js npx create-next-app@latest. Masukkan nama project, pilih yes semua kecuali yg terakhir (custom @), pilih no.

Mantine (UI Component Library)

Install Mantine.dev di link ini. Pilih packages yg diinginkan, biasanya: hooks, core, dates, notifications, modals. Copy dependencies command untuk install dibawahnya serta dev-dependencies command. Gunakan --save-exact agar version specific. Scroll kebawah terus untuk setup Mantine.

• (PENTING!) Apabila menambahkan packages lain, masuk ke page packages tersebut dan setup packages tersebut juga.

• Rubah global.css menjadi seperti ini:

  @layer tailwind {
    @tailwind base;
  }
  @tailwind components;
  @tailwind utilities;
  

Supabase

Run npm install @supabase/supabase-js @supabase/ssr --save-exact, dan setup .env atau .env.local dengan:

NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<SUBSTITUTE_SUPABASE_ANON_KEY>

Ikuti Supabase Next.js Template untuk file structure seperti middleware serta utils function nya (atau copy latest project dari PT. Otomindo).

Drizzle ORM

Pergi ke sini.

Zod (validation)

Run npm install drizzle-zod zod --save-exact

DevExtreme React (Mostly for DataGrid, but includes many UI components)

Check disini untuk installasi terbaru. Check jg disini untuk setup export excel dan pdf.