title: Tentang Next.js dan Tailwind CSS πŸ”₯ description: First impression menggunakan Next.js, Tailwind CSS, Framer Motion setelah tiga bulan. date: '2023-01-22' lang: id tags:

  • next
  • tailwindcss
  • framer-motion category: story

Halo halo, udah seminggu aja nih semenjak postingan saya yang sebelumnya Fitur 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:

    <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:

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

  • 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:

    <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>
    

    Saya ubah jadi:

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

    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 πŸ‘‹