ตัวอย่างหน้า login ใน Next.js
Created At :
Views 👀 :
นี่คือตัวอย่างหน้า login ใน Next.js โดยใช้ React และ CSS สำหรับการออกแบบหน้า login:
- สร้างหน้า login ในโฟลเดอร์
pages
ของโปรเจ็กต์ Next.js และสร้างคอมโพนเนนต์ login:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| import React, { useState } from 'react'; import styles from '../styles/Login.module.css';
function Login() { const [email, setEmail] = useState(''); const [password, setPassword] = useState('');
const handleSubmit = (e) => { e.preventDefault(); };
return ( <div className={styles.container}> <h1>Login</h1> <form onSubmit={handleSubmit}> <div className={styles.inputContainer}> <label htmlFor="email">Email:</label> <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <div className={styles.inputContainer}> <label htmlFor="password">Password:</label> <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} /> </div> <button type="submit">Login</button> </form> </div> ); }
export default Login;
|
- สร้างไฟล์ CSS สำหรับออกแบบหน้า login (ในตัวอย่างนี้เราใช้ไฟล์ CSS module ชื่อ
Login.module.css
):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| .container { width: 100%; max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-align: center; }
h1 { margin-top: 0; }
.inputContainer { margin-bottom: 15px; text-align: left; }
label { display: block; font-weight: bold; }
input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
button { display: inline-block; padding: 10px 20px; background-color: #0070f3; color: #fff; border: none; border-radius: 5px; cursor: pointer; }
button:hover { background-color: #0050c8; }
|
- รันโปรเจ็กต์ Next.js ของคุณโดยใช้
npm run dev
หรือ yarn dev
และไปที่ URL http://localhost:3000/login
เพื่อดูหน้า login ที่คุณสร้าง.
หน้า login นี้มีฟอร์มที่ให้ผู้ใช้กรอกอีเมลและรหัสผ่าน เมื่อผู้ใช้กดปุ่ม “Login” คุณสามารถเพิ่มโค้ดสำหรับตรวจสอบข้อมูลการเข้าสู่ระบบและทำการเข้าสู่ระบบจริง ๆ ตามแลปคำถามของคุณ.
โดยปกติแล้วในโปรเจ็กต์ Next.js คุณจะใช้งานระบบการตรวจสอบสิทธิ์และการจัดการเซสชันเพื่อติดตามสถานะการล็อกอินของผู้ใช้ เช่น ใช้ next-auth
หรือสร้างระบบการตรวจสอบสิทธิ์เองตามความต้องการของโปรเจ็กต์.