Project Next.js 14 dengan Zustand, React Query (TanStack), dan ShadCN

📌 Pendahuluan

Proyek ini menggunakan Next.js 14 sebagai kerangka kerja utama, dengan Zustand untuk manajemen state, React Query (TanStack) untuk pengelolaan data asinkron, dan ShadCN untuk komponen UI yang modern dan fleksibel.

🛠️ Teknologi yang Digunakan

• Next.js 14 - Framework React untuk aplikasi web modern.
• Zustand - Manajemen state yang ringan dan fleksibel.
• React Query (TanStack) - Manajemen data server-side yang efisien.
• ShadCN - Komponen UI berbasis Radix dan Tailwind CSS.

🚀 Instalasi

Pastikan Anda sudah menginstal Node.js dan pnpm/npm/yarn sebelum memulai.

1. Clone repositori ini:

   git clone https://github.com/username/repository.git
   cd repository
   

2. Install dependensi:

   pnpm install  # atau npm install / yarn install
   

3. Jalankan proyek dalam mode pengembangan:

   pnpm dev  # atau npm run dev / yarn dev
   

4. Buka browser dan akses http://localhost:3000.

🏗️ Penggunaan

Manajemen State dengan Zustand

Buat file di store/useExampleStore.ts:

import { create } from 'zustand';

type ExampleState = {
  count: number;
  increment: () => void;
};

export const useExampleStore = create<ExampleState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Penggunaan dalam komponen:

import { useExampleStore } from '@/store/useExampleStore';

export default function Counter() {
  const { count, increment } = useExampleStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment} className="btn">Tambah</button>
    </div>
  );
}

Fetching Data dengan React Query (TanStack)

Buat file di lib/api.ts:

export const fetchData = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  if (!res.ok) throw new Error('Gagal mengambil data');
  return res.json();
};

Penggunaan dalam komponen:

import { useQuery } from '@tanstack/react-query';
import { fetchData } from '@/lib/api';

export default function DataList() {
  const { data, error, isLoading } = useQuery({ queryKey: ['posts'], queryFn: fetchData });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Menggunakan Komponen UI dari ShadCN

Pastikan telah menginstal ShadCN:

pnpm dlx shadcn-ui@latest init

Contoh penggunaan tombol:

import { Button } from '@/components/ui/button';

export default function ExampleButton() {
  return <Button variant="outline">Klik Saya</Button>;
}

✅ TODO

• Setup Next.js 14
• Integrasi Zustand untuk state management
• Implementasi React Query (TanStack) untuk fetching data
• Konfigurasi ShadCN untuk komponen UI
• Tambahkan autentikasi dengan NextAuth
• Implementasi dark mode

📜 Lisensi

Proyek ini dilisensikan di bawah MIT License.

---

Selamat ngoding! 🚀