Tentang Next.js dan Tailwind CSS 🔥

Halo halo, udah seminggu aja nih semenjak postingan saya yang sebelumnya Fitur Multiple ReactionsQuick ViewFitur Multiple Reactions.

Kali ini ngga akan bahas fitur baru, tapi lebih ke cerita gimana sih rasanya menggunakan Next.js, Tailwind CSS, Framer Motion setelah sekitar tiga bulan lamanya.

Yap, tiga bulan. Semua teknologi tersebut baru saya gunakan untuk pertama kalinya dalam pembuatan website ini yang dimulai sekitar tanggal 23 Oktober 2022.

Semuanya berawal dari Tweet ini.

Ini saya cerita aja ya, berdasarkan apa yang saya rasakan. Ngga ngebandingin sama tech stacks yang sejenis karena emang belum pernah pake yang lain sih hehe.

Gas langsung ya..

Next.js

Sebelumnya saya kalau bikin website React suka pake CRA, dan baru pake Next.js di website ini.

Jujur enak banget sih pake Next.js ini. Semua fitur penting —yang saya butuhin— udah disediain, DX nya mantepp, docsnya lengkap, tutorialnya to the point.

Yang paling keren tuh, support SSG dan SSR. Tapi ini beberapa fitur yang saya suka:

Routing

Ini paling penting sih. Sudah support routing out-of-the-box. Bikin dynamic page juga kaya blog gampang banget.

Dan yang paling saya suka itu API Routesnya. Bikin API endpoint tinggal gunain API Routesnya, yang juga udah disediain. Jadi ngga perlu setup Express lagi.

Suport MDX

Gampang banget implementasi markdown atau mdx untuk blogging menggunakan @next/mdx.

Buat page biasa juga bisa, jadi bisa banget bikin page biasa formatnya mdx atau buat page yang kebanyakan konten 'writing'-nya.

Optimization

Penggunaan font dan image sudah dioptimalkan oleh Next.js.

Pake Google font tinggal import dari packagenya @next/font. Pake image udah support compression sama srcset otomatis.

Engga enak gimana lagi coba?

Sebenarnya banyak banget fitur-fitur kecil lainnya, kaya compilingnya cepet, i18n routing, static HTML export dll.

Coba deh tengok tipis-tipis docsnya atau sekalian gas cobain dulu aja.

Tailwind CSS

Coba liat dulu sample code ini (dari situs resminya tailwindcss.com), yang stylingnya pake Tailwind CSS:

<figure class="rounded-xl bg-slate-100 p-8 dark:bg-slate-800 md:flex md:p-0">
  <img
    class="mx-auto h-24 w-24 rounded-full md:h-auto md:w-48 md:rounded-none"
    src="/sarah-dayan.jpg"
    alt=""
    width="384"
    height="512"
  />
  <div class="space-y-4 pt-6 text-center md:p-8 md:text-left">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale on large teams.
        It’s easy to customize, adapts to any design, and the build size is
        tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">Sarah Dayan</div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Awalnya saya mikir kaya:

kok approach stylingnya aneh ya? messy banget HTML-nya? kalau kaya gitu kenapa gak pake iniline styles aja?

Ah pokokna mah banyak ini-itu nya 😂

Tapi semenjak dapet proyekan freelance yang pake Tailwind CSS, mau gamau harus pake juga.

Eh ternyata, enak juga euy pake si Tailwind CSS teh. Saya coba dan terapin deh di pembuatan website ini.

Enaknya gimana?

• Gaperlu gunti-ganti file buat styling

  Markup dan styles cukup di tempat yang sama. Gaperlu buka file css, nentuin nama class, nyari classnya apa yang mau diedit dll.

  Ini karena stylesnya nempel di HTML, jadi kalau mau bikin atau update komponen gampang dan cepet banget.

  Tinggal buka filenya, edit konten sekalian edit styles di tempat yang sama 🔥

  
  

• Berbeda dengan inline styles

  Pemikiran awal saya salah ternyata emang beda sama ininine styles. Pake Tailwind CSS, di HTMLnya langsung ternyata saya bisa styling kaya efek hover, focus dll.

  
  

• Full CSS support

  Hampir semua fitur CSS di cover semua sama Tailwind CSS. Bikin gradient, efek backdrop, grid, responsive design (breakpoints), dll.

  Makin banyak dong utility classnya?

  Iya! tapi kalau pake VS Code, malah enak banget karena udah disediain VS Code extension, dimana kalau lagi edit HTML classnya, bakal muncul autocomplete list utility class Tailwind CSS nya!

  
  

• Shorthand Utilities

  Bisa pake class inset-0 untuk CSS yang outputnya:

  .inset-0 {
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
  }
  

  Atau masih banyak lagi kaya x dan y untuk shorthand kiri+kanan dan atas+bawah. Misal inset-x-0, px-2, border-y-0 dll.

  
  

• Suport dark mode

  Tailwind CSS sudah menyediakan utility classes (variant) bernama dark: dimana bisa digunakan untuk styling dark mode.

  Misal:

  Copied!

  <div class="text-black dark:text-white">Hello, World!</div>
  

  Tulisan 'Hello, World!' diatas akan berwarna hitam secara default dan warna putih di mode gelap atau dark mode.

  
  

• Output size CSS-nya kecil

  Karena Tailwind CSS ini otomatis ngebundle utility class yang dipake aja, jadi outputnya kecil tergantung berapa banyak utility yang digunakan.

  
  

Ada yang ngga enaknya? tentu ada.

• Classname yang panjang

  Ini sempet rame juga di Twitter 😂 Tapi saya akalin pake clsx() agar agak rapihan dikit. Penampakannya:

  Copied!

  <nav
    className={clsx(
      'border-divider-light rounded-xl border bg-white',
      'dark:border-divider-dark dark:bg-slate-900'
    )}
  ></nav>
  

  TypeScript React

  Lines: 6

  UTF-8
  
  

• Beban ke HTML makin berat

  Meski output CSS nya kecil, tapi justru output HTML nya yang jadi lebih gede. Karena class name yang panjang itu pasti nambah ukuran bit ke HTML ya kan.

  Bisa sih diakalin, back to the old way, dimana kalau kira kira class nya banyak, apalagi dipake berulang-ulang (looping misal) bisa pake css class biasa.

  Contoh kasus:

  Copied!

  <div
    class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
  >
    Home
  </div>
  <div
    class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
  >
    Projects
  </div>
  <div
    class="text-accent-600 dark:text-accent-400 hover:text-accent-700 hover:dark:text-accent-300 flex h-9 items-center gap-1 rounded-xl px-2 text-[13px] font-bold dark:font-semibold"
  >
    Blog
  </div>
  

  HTML

  Lines: 15

  UTF-8

  Saya ubah jadi:

  index.html

  styles.css

  Copied!

  <div class="nav-link">Home</div>
  <div class="nav-link">Projects</div>
  <div class="nav-link">Blog</div>
  

  HTML

  Lines: 3

  UTF-8

  Dengan begitu bisa mengurangi beban load HTML nya.

Framer Motion

Urusan peranimasian nih. Ngga dipake untuk bikin animasi yang complex, tapi basic-bacic aja, kaya fade-in fade-out.

Pengalaman baru banget sih, bikin animasi pake JavaScript. Karena sebelumnya saya kalau bikin animasi selalu pake CSS.

Rasanya? Enak cuy. Hasilnya juga smooth. Karena pake JavaScript, jadi gampang juga kalau 'nganimasi' lewat events tertentu.

Misal kaya onClick, onScroll, ketika component pertama dirender, atau bahkan ketika elementnya 'visible' di viewport.

Bonus Point

1. Vercel

   Sebelumnya cuma pake GitHub pages, karena untuk hosting static pages aja (pake CRA). Sekarang saya pake Vercel untuk hosting proyek Next.js

   Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

   — vercel.com/

   Setup deploymentnya ngga ribet, fast, fitur staging kaya development atau preview mode buat situsnya (ngga langsung deploy ke production), dan tentunya 'ada' versi gratisnya.

   Recommended hosting buat project Next.js, karena emang Next.js punyanya Vercel juga 😂

Summary

Seneng dan enjoy aja sih pake Next.js, Tailwind CSS dan Framer Motion. Developer Experiencenya good banget, easy to use dan docsnya rapi.

Meskipun terbilang baru nyoba, I think this tech stack is going to be my first choice when creating a website.

Udah mungkin segitu aja, jaga kesehatan dan sampai jumpa minggu depan 👋