Next.js15 dan Shadcn/ui

Leave a Comment / By /

Shadcn/ui: Pustaka Komponen UI yang Fleksibel untuk React

Shadcn/ui adalah sebuah pustaka komponen UI yang populer dan open-source, dirancang khusus untuk framework JavaScript, React.js. Pustaka ini menyediakan berbagai macam komponen UI yang sudah jadi dan siap pakai, sehingga Anda dapat dengan cepat membangun antarmuka pengguna yang modern dan menarik tanpa harus membuat semuanya dari awal.

Apa yang Membuat Shadcn/ui Istimewa?
  • Fleksibilitas: Shadcn/ui memberikan Anda kontrol penuh atas tampilan dan nuansa komponen. Anda dapat menyesuaikan komponen-komponen ini sesuai dengan kebutuhan proyek Anda.
  • Kustomisasi: Pustaka ini dibangun berdasarkan Tailwind CSS, sehingga Anda dapat dengan mudah mengkostumisasi tampilan komponen menggunakan utility classes yang disediakan oleh Tailwind.
  • Aksesibilitas: Komponen-komponen yang disediakan oleh Shadcn/ui dirancang dengan memperhatikan aspek aksesibilitas, sehingga aplikasi Anda dapat digunakan oleh semua pengguna, termasuk pengguna dengan disabilitas.
  • Dokumentasi yang Baik: Shadcn/ui dilengkapi dengan dokumentasi yang lengkap dan mudah dipahami, sehingga Anda dapat dengan cepat mempelajari cara menggunakan pustaka ini.
Keuntungan Menggunakan Shadcn/ui
  • Pengembangan yang Lebih Cepat: Dengan menggunakan komponen-komponen yang sudah jadi, Anda dapat mempercepat proses pengembangan aplikasi.
  • Konsisten: Semua komponen dalam Shadcn/ui memiliki tampilan yang konsisten, sehingga aplikasi Anda akan terlihat lebih profesional.
  • Teruji: Komponen-komponen ini telah teruji dengan baik dan digunakan oleh banyak pengembang, sehingga Anda dapat yakin akan kualitasnya.
  • Komunitas yang Aktif: Shadcn/ui memiliki komunitas yang aktif, sehingga Anda dapat dengan mudah mendapatkan bantuan jika mengalami kesulitan.

Instalasi Next.js

Untuk latihan-latihan, biasanya saya buat sebuah folder d:\latihan.

Jalankan Command Prompt lalu masuk ke folder d:\latihan tersebut.

Install Next.js 15 dengan perintah berikut :

npx create-next-app@latest

maka nanti akan muncul pertanyaan-pertanyaan. Saya isinya sebagai berikut :

D:\latihan>npx create-next-app@latest
Need to install the following packages:
create-next-app@15.1.3
Ok to proceed? (y) y

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

Creating a new Next.js app in D:\latihan\njs15_shadcn.

Using npm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc


added 371 packages, and audited 372 packages in 2m

141 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created njs15_shadcn at D:\latihan\njs15_shadcn

Silahkan pindah ke directory D:\latihan\njs15_shadcn dan jalankan aplikasi editor (saya menggunakan Visual Studio Code)

Instalasi Shadcn/ui

Link untuk proses instalasi : https://ui.shadcn.com/docs/installation/next

Untuk instalasi kali ini saya menggunakan pnpm. Buka terminal di VS Code, dan jalankan perintah :

pnpm dlx shadcn@latest init

Nanti akan muncul pertanyaan-pertanyaan. Saya memilih

  • Style : New York
  • Base Color : Zinc
  • CSS Variable : Yes
D:\latihan\njs15_shadcn>pnpm dlx shadcn@latest init
Packages: +170
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++  
Progress: resolved 170, reused 165, downloaded 5, added 170, done
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
√ Which style would you like to use? » New York
√ Which color would you like to use as the base color? » Zinc
√ Would you like to use CSS variables for theming? ... no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src\app\globals.css
  Installing dependencies.

It looks like you are using React 19.
Some packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).

? How would you like to proceed? » - Use arrow-keys. Return to submit.
>   Use --force
    Use --legacy-peer-deps

√ How would you like to proceed? » Use --legacy-peer-deps
✔ Installing dependencies.
✔ Created 1 file:
  - src\lib\utils.ts

Success! Project initialization completed.
You may now add components.

Dikarenakan saya menggunakan React 19, maka ada sedikit issue. Silahkan dibaca saja dokumentasinya pada link yang disediakan. Saya pilih –legacy-peer-deps

Salah satu kelebihan dari Shadcn ini, hanya komponen yang dibutuhkan saja yang diinstall. Misalnya saya ingin menggunakan component button, maka saya harus mengginstallnya dengan perintah berikut :

D:\latihan\njs15_shadcn>pnpm dlx shadcn@latest add button
✔ Checking registry.
  Installing dependencies.

It looks like you are using React 19.
Some packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).

√ How would you like to proceed? » Use --legacy-peer-deps
✔ Installing dependencies.
✔ Created 1 file:
  - src\components\ui\button.tsx

Dengan install satu per satu hanya component yang dibutuhkan saja, maka source code semakin ramping.

Terlihat bahwa script di atas telah menambahkan sebuah file button.tsx di directory src\components\ui

Cara menggunakan komponen Shadcn

Edit file app/page.tsx menjadi sebagai berikut :

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

export default function Page() {
  return (
    <div className="flex min-h-svh items-center justify-center">
      <div className="flex flex-col items-center gap-2">
        <h1 className="text-2xl font-bold">Hello World</h1>
        <div className="text-sm">
          Get started by editing{' '}
          <code className="rounded bg-black/[.05] px-1 py-0.5 font-semibold dark:bg-white/[.06]">
            app/page.tsx
          </code>
        </div>
        <Button size="sm" className="mt-4">
          Button
        </Button>
      </div>
    </div>
  )
}

kemudian pada terminal, jalankan perintah berikut :

pnpm dev

sehingga tampilannya sebagai berikut :

D:\latihan\njs15_shadcn>pnpm dev

> njs15_shadcn@0.1.0 dev D:\latihan\njs15_shadcn
> next dev --turbopack

   ▲ Next.js 15.1.3 (Turbopack)
   - Local:        http://localhost:3000   
   - Network:      http://192.168.1.13:3000

 ✓ Starting...

silahkan akses http://localhost:3000 menggunakan browser.

maka tampilannya adalah sebagai berikut

Selamat , Anda telah berhasil menggunakan Shadcn/ui pada aplikasi Next.js 15.

Leave a Comment

Your email address will not be published. Required fields are marked *