Mengulik Instalasi Next.js dengan Tailwind CSS & TypeScript: Panduan Praktis yang Santai

Kenapa Kita Harus Pakai Next.js + Tailwind + TypeScript?

Saya sering denger temen‑temen tech ngomong, "Next.js itu framework yang powerfull, tapi stylingnya ribet". Padahal, kalau digabung sama Tailwind CSS dan TypeScript, workflow jadi mulus—Next.js ngurus rendering, Tailwind ngasih utility‑first CSS, dan TypeScript menambah safety pada kode. Kombinasi ini bukan sekadar hype; ia memanfaatkan kekuatan masing‑masing teknologi sehingga kita bisa fokus pada logika bisnis tanpa harus menulis CSS berulang‑ulang atau takut typo pada tipe data.

"Next.js dengan TypeScript dan Tailwind CSS memberikan fondasi yang kuat untuk aplikasi modern" (sumber: Belajar Next.js Dari Nol).

Siapkan Lingkungan: Node.js dan Pilihan Package Manager

Sebelum menekan tombol npx, pastikan Node.js sudah terinstall. Versi LTS terbaru biasanya sudah cukup. Untuk mengelola paket, Anda bisa pakai npm, yarn, atau pnpm. Di tutorial ini saya pakai pnpm karena kecepatan dan deduplication yang lebih baik, sesuai rekomendasi pada dokumentasi Tailwind: pnpm add -D tailwindcss @tailwindcss/postcss.

• Pastikan pnpm terinstall: npm i -g pnpm
• Periksa versi Node: node -v
• Pastikan terminal Anda berada di folder kerja yang bersih.

Langkah 1: Bootstrap Project dengan create‑next‑app

Next.js menyediakan CLI create-next-app yang otomatis menyiapkan struktur folder, konfigurasi package.json, dan bahkan mengaktifkan TypeScript bila diminta. Perintah yang paling ringkas, langsung dari sumber "Belajar Next.js Dari Nol", adalah:

npx create-next-app my-next-app --typescript --tailwind

Perintah ini melakukan tiga hal sekaligus:

• Membuat folder my‑next‑app dengan semua file dasar.
• Menambahkan dukungan TypeScript (menyertakan tsconfig.json).
• Mengintegrasikan Tailwind CSS via preset yang sudah dipasang secara otomatis.

Jika Anda lebih suka menambahkan Tailwind secara manual, tetap gunakan perintah tanpa flag --tailwind kemudian ikuti langkah instalasi Tailwind berikutnya.

Langkah 2: Tambahkan Tailwind CSS Secara Manual (Opsional)

Untuk yang ingin kontrol penuh atas versi atau plugin, ikuti instruksi pada dokumen "Install Tailwind CSS". Dengan pnpm jalankan:

pnpm add -D tailwindcss @tailwindcss/postcss

Package @tailwindcss/postcss adalah plugin PostCSS resmi yang diperlukan agar Tailwind dapat diproses dalam pipeline build Next.js.

Langkah 3: Konfigurasi PostCSS dan Tailwind

Setelah paket terinstall, Anda perlu menambahkan file konfigurasi postcss.config.js. Contoh minimal yang diambil dari dokumentasi Tailwind:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Lalu buat tailwind.config.js dengan perintah inisialisasi:

npx tailwindcss init -p

File tailwind.config.js secara default sudah memiliki properti content yang mengarah ke folder pages dan components. Pastikan pola glob mencakup semua file .tsx dan .ts agar Tailwind dapat purge CSS yang tidak terpakai:

module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Setelah konfigurasi selesai, tambahkan direktif Tailwind ke file CSS global (biasanya styles/globals.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Next.js secara otomatis mengimpor globals.css di pages/_app.tsx, jadi tidak perlu langkah tambahan.

Langkah 4: Pastikan TypeScript Sudah Aktif

Jika Anda menggunakan perintah --typescript pada create-next-app, file tsconfig.json sudah tersedia. Namun, bila Anda menambahkan TypeScript setelah proyek terbentuk, jalankan:

pnpm add -D typescript @types/react @types/node

Selanjutnya, jalankan npm run dev atau pnpm dev. Next.js akan otomatis membuat tsconfig.json yang berisi setelan standar. Anda dapat memperkaya setelan tersebut, misalnya menambahkan paths untuk alias modul, sebuah fitur yang disebutkan dalam "Getting Started: Installation" sebagai bagian dari setup default.

Langkah 5: Membuat Komponen UI dengan Tailwind

Sekarang kita punya fondasi lengkap: Next.js, Tailwind, dan TypeScript. Mari buat contoh komponen tombol yang responsive dan tipe‑safe.

import React from "react";

type ButtonProps = {
  label: string;
  onClick?: () => void;
};

export const PrimaryButton: React.FC = ({ label, onClick }) => (
      className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    onClick={onClick}
  >{label}
);

Catatan penting:

• Kita menggunakan tipe ButtonProps sehingga IDE memberi peringatan bila properti tidak sesuai.
• Kelas Tailwind dideklarasikan dalam atribut className dan bersifat utility‑first, sehingga tidak perlu menulis file CSS tambahan.

Letakkan komponen ini di components/PrimaryButton.tsx, lalu panggil di halaman pages/index.tsx:

import { PrimaryButton } from "../components/PrimaryButton";

export default function Home() {
  return (
    
 
       console.log('Clicked!')} /> 
    
  );
}

Jalankan pnpm dev dan lihat tombol berwarna biru yang responsif. Semua styling datang dari Tailwind, sementara TypeScript menjamin properti label selalu string.

Tips Tambahan: ESLint, Path Alias, dan Optimasi Build

Dokumen "Getting Started: Installation" menekankan bahwa create-next-app sudah menyiapkan ESLint secara default. Jika Anda ingin menyesuaikan aturan, edit .eslintrc.json dan tambahkan plugin yang relevan, misalnya eslint-plugin-react atau eslint-plugin-jsx-a11y. Untuk alias modul (module path alias), tambahkan ke tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@styles/*": ["styles/*"]
    }
  }
}

Setelah menambahkan alias, pastikan Next.js mengenalinya dengan memperbarui next.config.js:

const path = require('path');

module.exports = {
  webpack(config) {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, 'components'),
      '@styles': path.resolve(__dirname, 'styles'),
    };
    return config;
  },
};

Optimasi build dapat ditingkatkan dengan mengaktifkan experimental: {appDir: true} pada Next.js 13+ jika Anda menggunakan App Router, sebagaimana dibahas pada artikel "Belajar Next.js App Router #1".

Kesimpulan: Apa yang Kita Dapatkan?

Dengan mengikuti alur di atas, kita berhasil menyiapkan proyek Next.js yang modern, ter‑styled dengan Tailwind, dan ter‑type‑safe berkat TypeScript. Semua langkah—dari bootstrap project, instalasi Tailwind via pnpm, konfigurasi PostCSS, hingga penambahan alias modul—bisa dilakukan dalam hitungan menit, berkat CLI yang sudah matang. Hasilnya? Codebase yang lebih bersih, UI yang konsisten, dan pengalaman developer yang lebih menyenangkan.

"Setup ini memungkinkan kita fokus pada fitur bisnis, bukan pada konfigurasi boilerplate".

Selamat mencoba, dan jangan ragu bereksperimen dengan plugin Tailwind tambahan atau strategi rendering Next.js yang lebih canggih. Sampai jumpa di artikel selanjutnya!