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.
Sign up to get 100 USDT
I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article. https://accounts.binance.com/fr-AF/register-person?ref=JHQQKNKN