Setup Web Modern dengan Next.js dan Tailwind CSS

Zaman sekarang, bikin website tuh gak perlu ribet-ribet kayak dulu. Udah ada banyak tools yang ngebantu kita ngoding cepet, rapi, dan keren. Nah, dua senjata andalan para web dev masa kini adalah Next.js dan Tailwind CSS.

Kalau lo pengen bikin web yang kece, responsif, dan performanya ngebut, combo ini wajib lo cobain. Di blog ini, gue bakal tunjukin cara mulai proyek lo dari nol sampe jadi!

Next.js & Tailwind CSS itu Apaan Sih?

Next.js: Ini tuh framework-nya React yang udah lengkap banget. Bisa SSR (Server Side Rendering), SSG (Static Site Generation), routing otomatis, sampe bikin API juga bisa langsung dari sini.

Tailwind CSS: Framework CSS yang utility-first banget. Lo tinggal pake class langsung di elemen HTML/JSX, gak perlu nulis file CSS panjang-panjang. Cepet, rapi, dan fleksibel!

Langkah Gampang Bikin Proyeknya

1. Hal - hal yang dibutuhkan

• Node.js 18.18 +

• macOS, Windows (including WSL), atau Linux.

2. Bikin Proyek Next.js

Pertama, buka terminal lo dan ketik:

npx create-next-app@latest setup-next-js-tailwind

Dan akan muncul pertanyaan-pertanyaan seperti berikut:

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? @/*

pilih Tailwind CSS = Yes 

cd setup-next-js-tailwind

3. Gaskuen Jalankan Proyek

npm run dev

Buka http://localhost:3000 di browser, dan voila! Web lo udah jalan.

4. Cobaiinn Tailwindnya

export default function Home() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600">
        Halo Mommy! Next.js + Tailwind CSS
      </h1>
    </div>
  )
}

Boom! Sekali save, langsung keliatan hasilnya.

Coba Sekarang

Dengan Next.js dan Tailwind CSS, lo bisa bikin website modern yang kece abis, tanpa harus pusing sama setup dan styling ribet. Cocok banget buat lo yang pengen cepet prototyping atau bikin proyek personal/klien.

Cobain aja dulu, dijamin ketagihan 😎
Kalau lo pengen lanjut deploy ke Vercel, atau mau tutorial fullstack-nya, tinggal bilang ya!

Powered by wisp