
### Intro

Para Software Developer biasanya punya gaya dan aturan masing-masing dalam menulis kode atau penggunaan tools untuk membuat sebuah produk softaware. Preferensi dan gaya yang berbeda-beda tersebut sering kali menjadi argumen dan perdebatan panas di kalangan developer sepanjang waktu.

**Developer A:** Gua lebih seneng pake spasi daripada tabs.\
**Developer B:** Single quotes lebih cakep daripada double quotes!\
**Developer C:** Bro! Kok ada ya yang pake light mode di VSCode?

Masalah-masalah tersebut sebenarnya bisa diatasi dengan menggunakan tools linter seperti ESLint (biar kode kita konsisten), prettier (buat format kode kita supaya rapih) dan husky (bantu kita buat masuk ke lifecycle pre-commit dan post-commit git).

Sebelum meng-commit kode kamu serangkaian pengecekan aturan-aturan akan di jalankan untuk memastikan kode yang kamu tulis sesuai dengan aturan-aturan yang ditetapkan dalam file eslint dan prettier. Pengecekan ini adalah yang memaksa dan memastikan "kesehatan" dan memaintain kekonsistenan penulisan kode dalam proyek, khususnya saat bekerja dengan tim developer atau orang-orang yang melakukan commit kode ke proyek open source yang kamu buat.
<br/>
<br/>

### Ayo Kita Mulai

Untuk menggunakan eslint, prettier dan husky di proyek Next.js atau React yang kamu buat pertama-tama kita instal terlebih dahulu dependencies ini dengan mengetikan perintah berikut ini:

```bash
yarn add --dev eslint prettier husky lint-staged eslint-config-prettier
```

Tujuan dari dependency yang di instal antara lain:

- **eslint:** untuk memastikan kualitas penulisan kode.
- **prettier:** untuk memastikan kode terformat dengan baik berdasarkan aturan-aturan yang telah ditetapkan.
- **husky:** memungkinkan untuk menjalankan skrip dalam file package.json dalam git lifecycle hooks.
- **lint-staged:** menjalankan skrip yang ditentukan hanya pada file yang ditetapkan.
- **eslint-config-prettier:** mencegah berbagai macam konflik format kode antara eslint dan prettier. Seperti yang kita tahu, eslint menghandle kualitas kode dan format kode. Package ini mendisable aturan dalam eslint yang berfungsi untuk memformat kode jadi eslint cuma fokus dalam memastikan kualitas penulisan kode.
  <br/>
  <br/>

### Konfigurasi Prettier

1. Buat file bernama `.prettier.json` dan masukkan perintah di bawah ini:

```json
{
  "trailingComma": "es5",
  "bracketSpacing": true,
  "printWidth": 80,
  "tabWidth": 2,
  "singleQuote": true,
  "arrowParens": "always"
}
```

2. Buat lagi sebuah file bernama `.prettierignore`. Kamu bisa memasukan folder dan file yang tidak boleh di format oleh prettier saat melakukan formatting. Berikut ini adalah beberapa file dan folder yang biasanya di ignore:

```bash
node_modules;
build;
dist;
```

<br/>
<br/>

### Konfigurasi ESLint

Proyek seperti _create-react-app_ dan Next.js biasanya sudah punya konfigurasi eslint didalamnya. Yang perlu kamu lakukan adalah mengaitkan prettier kedalam file file eslint `.eslintrc.json`. Alasannya karena kita mau eslint cuma fokus dibagian masalah kualitas kode dan membiarkan prettier yang mengurus formatting kode kita. Ini adalah saat dimana package `eslint-config-prettier` yang kita instal sebelumnya bermain.

```json
{
  "extends": ["next/core-web-vitals", "prettier"]
}
```

Tapi untuk proyek yang belum punya konfigurasi eslint bisa mengikuti langkah berikut:

1. Lakukan inisialisasi eslint dan ikuti perintah yang muncul di command prompt

```bash
npx eslint --init
```

2. Setelah mengikuti perintah tersebut, sebuah file bernama `.eslintrc.json` akan dibuat. Lalu kaitkan prettier disana.
3. Tambahkan file `.eslintignore` untuk mengabaikan folder node_modules, builds dan dist.
   <br/>
   <br/>

### Konfigurasi Lint-Staged

Jalankan perintah berikut ini untuk menginstal dan mengkonfigurasi husky dan lint-staged:

```bash
npx mrm@2 lint-staged
```

Saat lint-staged selesai, dia akan membuat skrip dalam `package.json` seperti ini:

```json
"lint-staged": {
  "*.{js, jsx, ts, tsx}": "eslint --cache --fix",
  "*.{js, css, md}": "prettier --write"
}
```

Dan juga sebuah folder bernama `.husky` akan dibuat. Buika file pre-commit dalam folder tersebut dan tambahkan perintah berikut:

```bash
yarn lint-staged
```

Perintah diatas akan menjalankan skrip lint-staged dalam file `package.json` ketika mengcommit dan memastikan kode sudah di format sesuai dengan aturan-aturan yang ditetapkan dan kode tersebut terbebas dari berbagai masalah linting.

![Console](https://i.ibb.co.com/jzCxLrk/console.png)

Sumber: [Medium](https://victorbruce82.medium.com/setting-up-eslint-prettier-and-husky-in-your-nextjs-project-b468fb56331)

<br>


Cara Setting ESLint, Prettier dan Husky di Next.js


Kali ini kita bakalan bahas cara instal Tailwind CSS dan shadcn/ui dengan langkah-langkah yang simpel dan gampang dipahami agar proses development web kita jadi lebih menyenangkan. Yuk, langsung aja!

<br>

### **Langkah 1: Bikin Proyek Next.js 15**  
Pertama-tama, pastikan kamu sudah instal Node.js dan Yarn. Kalau sudah, bikin proyek baru:  

```bash
npx create-next-app@latest
```

lalu akan muncul pertanyaan seperti ini:

```bash
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*
```

Pastikan kamu memilih Yes di pertanyaan _Would you like to use Tailwind CSS?_ untuk menginstal Tailwind CSS di project Next.js secara otomatis. Setelah jalan, buka di browser (biasanya di `http://localhost:3000`) buat cek apakah proyeknya udah running.

<br>

### **Langkah 2: Instal shadcn/ui**  
shadcn/ui adalah komponen UI modern berbasis Tailwind yang siap pakai. Gini cara setup-nya:  

1. **Instal shadcn/ui CLI**  
   Jalankan perintah init untuk membuat proyek Next.js baru atau untuk menyiapkan proyek yang sudah ada:

   ```bash
   npx shadcn@latest init
   ```

2. **Konfigurasi Components.json**  
   Akan muncul pertanyaan seperti ini untuk mengkonfigurasi components.json:

   ```bash
    Which style would you like to use? › New York
    Which color would you like to use as base color? › Zinc
    Do you want to use CSS variables for colors? › no / yes
   ```

3. **Instal Komponen shadcn/ui**  
   Sekarang kamu bisa menambahkan komponen ke dalam project. Disini kita coba instal komponen Button:

   ```bash
   npx shadcn@latest add button
   ``` 

4. **Gunakan komponen shadcn/ui**  
   Coba tambahkan `Button` ke halaman:  
   ```jsx
   import { Button } from '@/components/ui/button';

   export default function Home() {
     return (
       <div className="p-5">
         <h1 className="text-3xl font-bold mb-4">Tailwind CSS + shadcn/ui</h1>
         <Button variant="default">
           Klik Aku!
         </Button>
       </div>
     );
   }
   ```  

5. **Kustomisasi Tema**  
   Kalau mau, kamu bisa custom tema shadcn/ui di file Tailwind CSS atau file konfigurasi shadcn.  

<br>

### **Penutup**  
Mudah banget, kan? Dengan setup ini, kamu bisa mulai bikin website modern yang cepat, responsive, dan enak dilihat. Selamat mencoba, dan jangan ragu untuk eksplor lebih jauh fitur-fitur Tailwind CSS dan shadcn/ui! 🚀  

Kalau ada kendala atau pertanyaan, langsung aja komentar ya! 😉

Tutorial Instal Tailwind CSS dan shadcn/ui di Next.js 15


Hei para developer kece! Udah pada tau belum sih tentang Next.js dan Nuxt.js? Dua framework ini lagi ngetren banget di dunia web development. Tapi, emangnya apa sih bedanya? Yuk, kita bahas bareng-bareng!

#### Kenalan dulu yuk!

- **Next.js** itu kayak superhero-nya React. Dia bikin development React jadi lebih gampang dan powerful.
- **Nuxt.js** itu jagoannya Vue. Dia ngebantu kita bikin aplikasi Vue yang lebih canggih.

#### Persamaan mereka:

1. Sama-sama bikin hidup developer lebih mudah
2. Punya fitur server-side rendering (SSR) yang bikin website lo jadi lebih cepet loadingnya
3. Bisa bikin static site yang keren abis

#### Nah, sekarang kita intip bedanya:

##### 1. Basis Framework
- **Next.js**: Setia sama React
- **Nuxt.js**: Cinta mati sama Vue

Jadi, pilih sesuai selera lo ya. Suka React? Gas ke Next.js. Doyan Vue? Nuxt.js siap melayani.

##### 2. Konfigurasi
- **Next.js**: Lebih fleksibel, tapi kadang bikin pusing
- **Nuxt.js**: Udah diatur dari sananya, jadi tinggal pake

Lo tipe yang suka mainan setting? Next.js bisa jadi pilihan. Tapi kalo mau yang simpel, Nuxt.js bisa jadi BFF lo.

##### 3. Performa
Dua-duanya cepet sih, tapi Next.js sedikit lebih unggul dalam hal kecepatan loading.

##### 4. Ekosistem
- **Next.js**: Punya temen-temen plugin yang banyak banget
- **Nuxt.js**: Pluginnya lebih sedikit, tapi lebih terpadu

##### 5. Learning Curve
- **Next.js**: Agak lebih nanjak buat pemula
- **Nuxt.js**: Lebih landai, cocok buat yang baru mulai

#### Jadi, mana yang lebih oke?

Eits, jangan buru-buru milih! Keduanya punya kelebihan masing-masing.
- Next.js keren buat proyek yang butuh kustomisasi tingkat tinggi.
- Nuxt.js oke banget buat yang pengen cepet jadi tanpa ribet-ribet setting.

Yang penting, pilih yang cocok sama kebutuhan dan skill lo. Mau tantangan? Coba Next.js. Pengen yang gampang dipelajari? Nuxt.js bisa jadi pilihan tepat.

#### Penutup

Gimana? Udah mulai paham kan bedanya? Sekarang, giliran lo nih. Framework mana yang menurut lo paling oke? Share pendapat lo di kolom komentar ya! Kalo masih bingung, tanya aja. Kita diskusi bareng-bareng!

Oh iya, jangan lupa cobain dua-duanya. Pengalaman itu guru terbaik. Siapa tau lo bisa jadi master di kedua framework ini. Keren kan?

Yuk, mulai coding dan bikin website yang ciamik!