ตัวอย่างหน้า login ใน Next.js

นี่คือตัวอย่างหน้า login ใน Next.js โดยใช้ React และ CSS สำหรับการออกแบบหน้า login:

  1. สร้างหน้า 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
// pages/login.js
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;
  1. สร้างไฟล์ 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
/* styles/Login.module.css */
.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;
}
  1. รันโปรเจ็กต์ Next.js ของคุณโดยใช้ npm run dev หรือ yarn dev และไปที่ URL http://localhost:3000/login เพื่อดูหน้า login ที่คุณสร้าง.

หน้า login นี้มีฟอร์มที่ให้ผู้ใช้กรอกอีเมลและรหัสผ่าน เมื่อผู้ใช้กดปุ่ม “Login” คุณสามารถเพิ่มโค้ดสำหรับตรวจสอบข้อมูลการเข้าสู่ระบบและทำการเข้าสู่ระบบจริง ๆ ตามแลปคำถามของคุณ.

โดยปกติแล้วในโปรเจ็กต์ Next.js คุณจะใช้งานระบบการตรวจสอบสิทธิ์และการจัดการเซสชันเพื่อติดตามสถานะการล็อกอินของผู้ใช้ เช่น ใช้ next-auth หรือสร้างระบบการตรวจสอบสิทธิ์เองตามความต้องการของโปรเจ็กต์.