Next.js Template (Tailwind CSS, ESLint, Prettier)

Ini adalah proyek Next.js di-bootstrap dengan create-next-app, di-generate menggunakan BikinProject.

Teknologi Yang Digunakan

• Next.js (App Router)
• React
• TailwindCSS
• Axios
• ESLint & Prettier

Fitur

Fitur yang terdapat pada templat proyek ini adalah:

• Proyek Arsitektur: Pemisahan komponen yang jelas menggunakan pola Common dan Mixins.
• Modern Stack: Menggunakan versi terbaru dari Next.js dan React.
• Turbopack Build: Pengalaman pengembangan yang sangat cepat.
• Custom Hooks: Kumpulan hooks yang berguna seperti useDebounce, usePagination, dan useSort.
• Tema Gelap/Terang: Dukungan next-themes secara bawaan.

Proyek Arsitektur

Terdapat beberapa poin penting terkait bagaimana menjalankan proyek arsitektur yang benar. Untuk studi kasus kali ini, Saya telah membuatkan sebuah templat proyek kosong yang sudah Saya kustomisasi yang sekiranya sudah mengimplementasi bagaimana cara mengatur proyek arsitektur yang baik agar terlihat rapi.

/
├── public/              # Aset statis (gambar, font, dll)
├── src/
│   ├── app/             # Next.js App Router (Halaman & API)
│   │   ├── api/         # Endpoint API (route.js)
│   │   ├── (auth)/      # Rute grup untuk autentikasi
│   │   ├── (root)/      # Rute grup untuk halaman utama
│   │   └── layout.jsx   # Layout utama aplikasi
│   ├── components/      # Komponen UI
│   │   ├── Common/      # Komponen atomik/kecil
│   │   └── Mixins/      # Komponen kompleks (gabungan Common)
│   ├── context/         # React Context Providers
│   ├── data/            # Data statis & Metadata
│   ├── hooks/           # Custom React Hooks (JS)
│   ├── interfaces/      # TypeScript Interfaces
│   ├── lib/             # Utilitas & Library helper
│   └── providers/       # Wrapper providers untuk layout
├── eslint.config.mjs    # Konfigurasi ESLint terbaru
├── jsconfig.json        # Konfigurasi JavaScript path aliases
├── next.config.js       # Konfigurasi Next.js
├── package.json         # Dependensi & Scripts
├── tailwind.config.js   # Konfigurasi Tailwind CSS
└── README.md

Komponen UI

• Folder Common: Berisi komponen-komponen atomik seperti tombol, icon, atau elemen UI dasar lainnya yang dapat digunakan kembali.
• Folder Mixins: Berisi komponen-komponen yang lebih besar dan kompleks yang merupakan gabungan dari beberapa komponen Common, seperti Navbar atau Footer.

Custom React Hooks

Terdapat beberapa hooks yang sudah disediakan untuk mempercepat pengembangan:

• useDebounce: Untuk menangani input yang memerlukan penundaan aksi.
• usePagination: Untuk menangani navigasi halaman melalui query params.
• useSort: Untuk menangani logika pengurutan data.

Mulai Sekarang

Template ini tersedia di BikinProject! Cara bagaimana untuk menggunakan template ini, ikuti langkah-langkah sederhana berikut:

1. Instal BikinProject: Mulailah dengan menjalankan perintah berikut di terminal Anda.

npx bikinproject@latest

2. Tentukan Direktori Proyek: Masukkan direktori tempat Anda ingin membuat proyek.

┌   create-bikinproject-app
│
◇  Where should we create your project?
└  ./your-project # Masukkan nama proyek Anda, seperti my-project atau .

3. Pilih Proyek Starter: Pilih proyek permulaan yang sesuai dengan kebutuhan Anda.

┌   create-bikinproject-app
│
◇  Where should we create your project?
│  ./your-project
│
◇  Pick a project type within "./your-project"
│  ● Next.js App Router (Tailwind + JavaScript)
│  ○ Next.js App Router (Tailwind + TypeScript)
│  ○ dll.
└  # Pilih jenis proyek dengan menggunakan tombol panah

4. Instal Dependensi: Pilih untuk menginstal dependensi secara otomatis.

┌   create-bikinproject-app
│
◇  Install dependencies? (pnpm is recommended)
│  ● Yes / ○ No
└  # Pilih Ya atau Tidak

5. Tunggu BikinProject Membuat Proyek: Tunggu BikinProject membuat proyek untuk Anda.

Note

Jika Anda memilih untuk memasang dependensi, BikinProject akan memasang dependensi yang diperlukan untuk Anda. Harap tunggu hingga penginstalan selesai.

┌   create-bikinproject-app
│
◇  ⏳ Creating project...
│
◇  🎉 Project Created!
│
◇  Next steps. ───────────────╮
│                             │
│  cd ./your-project          │
│  pnpm install               │
│  pnpm dev                   │
│                             │
├─────────────────────────────╯

6. Konfigurasi Environment: Salin file .env.example menjadi .env.

cp .env.example .env

7. Jalankan Server: Buka http://localhost:3000 pada browser Anda.

API Route

API Route dapat diakses melalui http://localhost:3000/api. Endpoint ini dikelola di dalam src/app/api/route.js.

Author

Naufal Akbar Nugroho
@nuflakbrr