Setelah memahami struktur dasar Next.js, layout, dan pengambilan data, kini saatnya kita masuk ke komponen penting dalam web modern: formulir input, validasi data pengguna, dan pengelolaan state (data dinamis) di sisi frontend.
🎯 Tujuan Part 3
- Membuat form input di Next.js
- Melakukan validasi input secara real-time
- Menggunakan
useStateuntuk mengelola state - Mengenal Context API untuk state global
📥 1. Membuat Form Input Dasar di Next.js
Contoh form sederhana: formulir kontak pengguna.
File: app/contact/page.jsx
'use client';
import { useState } from 'react';
export default function ContactPage() {
const [name, setName] = useState('');
const [message, setMessage] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
alert(`Nama: ${name}\nPesan: ${message}`);
};
return (
<div className="max-w-md mx-auto p-4 bg-white rounded shadow">
<h2 className="text-2xl font-bold mb-4">Kontak Kami</h2>
<form onSubmit={handleSubmit} className="space-y-4">
<input
type="text"
placeholder="Nama Anda"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full border p-2 rounded"
required
/>
<textarea
placeholder="Pesan Anda"
value={message}
onChange={(e) => setMessage(e.target.value)}
className="w-full border p-2 rounded"
required
/>
<button
type="submit"
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
>
Kirim
</button>
</form>
</div>
);
}
✅ 2. Validasi Form Input
Validasi sangat penting untuk mencegah data kosong atau salah format.
Tambahkan validasi sederhana:
const handleSubmit = (e) => {
e.preventDefault();
if (name.length < 3) {
alert("Nama minimal 3 karakter");
return;
}
if (message.length < 10) {
alert("Pesan terlalu singkat");
return;
}
alert(`Nama: ${name}\nPesan: ${message}`);
};
Untuk validasi lebih kompleks, gunakan library seperti React Hook Form atau Yup.
🧠 3. Menggunakan State Lokal dengan useState
Hook useState adalah cara utama menyimpan nilai dinamis di React/Next.js.
Contoh:
const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>
Klik Saya ({count})
</button>
🌐 4. Mengelola State Global dengan Context API
Jika kamu punya state yang dipakai di banyak halaman atau komponen, gunakan Context API.
Langkah Singkat:
- Buat file context:
app/context/UserContext.jsx - Buat provider:
'use client';
import { createContext, useState, useContext } from 'react';
const UserContext = createContext();
export const UserProvider = ({ children }) => {
const [user, setUser] = useState(null);
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
};
export const useUser = () => useContext(UserContext);
- Bungkus di
layout.jsx:
import { UserProvider } from './context/UserContext';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<UserProvider>{children}</UserProvider>
</body>
</html>
);
}
- Gunakan di halaman lain:
import { useUser } from '../context/UserContext';
const { user, setUser } = useUser();
🚨 Tips Tambahan untuk Produksi
- Selalu sanitasi input (hindari XSS)
- Gunakan
async/awaituntuk pengiriman data ke API - Tambahkan loading indicator dan notifikasi sukses/gagal
- Validasi sisi backend tetap wajib
📌 Studi Kasus Nyata
Jika Anda sedang membangun aplikasi seperti:
- Formulir kontak website perusahaan
- Pendaftaran akun atau login
- Komentar pengguna atau review produk
Maka penggunaan form + validasi + state adalah pondasi utama.
🚀 Siap Bangun Aplikasi Web Modern?
Elektra Network Vision membantu membangun sistem web yang cepat, aman, dan siap produksi menggunakan Next.js, termasuk form validasi, dashboard interaktif, dan koneksi API.
