Tutorial step‑by‑step untuk membangun aplikasi React modern menggunakan Next.js 14, memanfaatkan App Router, Server Actions, dan styling berbasis Tailwind CSS. Cocok untuk developer yang ingin mempercepat produktivitas dalam Web Development tahun 2026.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

  • Node.js >= 20.0 (LTS terbaru pada Juni 2026). Download di nodejs.org.
  • Git untuk version control.
  • Editor kode favorit, misalnya VS Code dengan ekstensi Next.js dan Tailwind CSS IntelliSense.
  • Akun Vercel (opsional) untuk deploy satu‑klik.

2. Membuat Proyek Next.js 14 Baru

npx create-next-app@latest my-next14-app --typescript
cd my-next14-app

Perintah di atas meng‑install Next.js versi stabil terbaru (14.x) dengan TypeScript. Setelah selesai, jalankan npm run dev untuk memastikan aplikasi berjalan pada http://localhost:3000.

3. Mengaktifkan App Router

Next.js 14 menggantikan pages/ dengan app/ sebagai folder utama. Lakukan langkah berikut:

  1. Hapus folder pages (atau pindahkan file yang masih dibutuhkan).
  2. Buat struktur dasar di dalam app/:
mkdir -p app/(home)/page.tsx
mkdir -p app/layout.tsx

Contoh app/layout.tsx:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        Next.js 14 Demo
      
      {children}
    
  );
}

File app/(home)/page.tsx menjadi beranda default.

4. Menambahkan Tailwind CSS (versi 3.4+)

# Instalasi dependensi
npm i -D tailwindcss@latest postcss@latest autoprefixer@latest
# Inisialisasi konfigurasi default
npx tailwindcss init -p

Ubah tailwind.config.js sehingga mengecek folder app dan components:

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

Tambahkan directive Tailwind ke app/globals.css (file yang sudah ada):

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

Pastikan RootLayout meng‑import globals.css:

import "../styles/globals.css";

Jalankan kembali npm run dev dan lihat tampilan default Tailwind.

5. Membuat Server Action untuk Formulir Kontak

Server Actions memungkinkan Anda mengeksekusi kode server langsung dari komponen React tanpa API route terpisah. Berikut contoh formulir kontak yang menyimpan data ke file JSON (demo lokal).

// app/(home)/contact/form.tsx
"use server";
import { writeFile } from "node:fs/promises";

export async function submitContact(formData: FormData) {
  const name = formData.get("name") as string;
  const email = formData.get("email") as string;
  const message = formData.get("message") as string;

  const entry = { name, email, message, date: new Date().toISOString() };
  await writeFile(
    "./data/contacts.json",
    JSON.stringify(entry, null, 2),
    { flag: "a" }
  );
}

export default function ContactForm() {
  return (