Апрацоўка POST запыту ў NextJS

Давайце навучымся дадаваць новага карыстальніка з дапамогай апрацоўшчыка POST запыту. Хай у нас будзе форма, у інпут якой трэба будзе ўвесці імя новага юзера. Пры гэтым яго id будзе дадавацца аўтаматычна, зыходзячы з даўжыні існуючага масіва. Таксама хай выводзіцца паведамленне аб паспяховым даданні юзера або аб узнікшай памылцы.

Спачатку давайце створым папку users/add, у якой будзе знаходзіцца файл users/add/page.jsx. Адразу прапішам у ім дырэктыву для работы з кліенцкімі кампанентамі. Далей імпартуем хук useState, неабходны для работы з уводзімымі у форму данымі:

'use client';

import { useState } from 'react';

У функцыі AddUserPage аб'яўляем зменныя name і setName для захоўвання імя юзера і яго абнаўлення адпаведна. Таксама з хука useState атрымліваем дзве зменныя responseMessage (захоўвае рэзультат дадання карыстальніка) і setResponseMessage (абнаўляе значэнне responseMessage). Зменная handleSubmit ўяўляе сабой асінхронную функцыю, якая выклікаецца пры адпраўцы формы і прадухіляе перазагрузку старонкі пры адпраўцы формы. У канструкцыі try-catch прапісваем з дапамогай функцыі fetch апрацоўку адраса /by/users метадам POST. У канцы функцыя AddUserPage будзе вяртаць HTML форму:

export default function AddUserPage() {
	let [name, setName] = useState('');
	let [responseMessage, setResponseMessage] = useState('');
	
	let handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
	
	try {
		let response = await fetch('/by/users', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({ name }),
			});
		
			if (!response.ok) {
				throw new Error('Error adding user');
			}
		
			let data = await response.json();
				setResponseMessage(`User added! Updated list: ${data.map((user: any) => user.name).join(', ')}`);
		} catch (error) {
			setResponseMessage('Error adding user');
		}
};

	return (
		<div>
		<h1>Add a New User</h1>
		<form onSubmit={handleSubmit}>
			<input
				type="text"
				value={name}
				onChange={(e) => setName(e.target.value)}
				placeholder="Enter user name"
				required
			/>
			<button type="submit">Add User</button>
		</form>
	
		{responseMessage && <p>{responseMessage}</p>}
		</div>
	);
}

Далей нам неабходна прапісаць работу з серверным кампанентам - апрацоўшчыкам POST запыту. У файле users/route.js побач з ужо існуючым апрацоўшчыкам GET запыту, прапісваем асінхронную функцыю POST. Для адлову памылак таксама выкарыстоўваем канструкцыю try-catch. Аб'яўляем зменную user, якая захоўвае рэзультат парсінга цела запыту і вяртае яго ў выглядзе аб'екта. Далей аб'яўляем зменную newUser, у якой будуць указаны ключы і значэнні для новага аб'екта. Затым дадамо newUser да масіва users з дапамогай метаду push. Выведзем у кансоль даныя дададзенага юзера. І вернем новы адказ, у якім будзе прапісана пераўтварэнне аб'екта JavaScript у радок у фармаце JSON. Таксама для карэктнай работы апрацоўшчыка прапісваем функцыі вяртаць у загалоўках 'Content-Type' у значэнні 'application/json':

export async function POST(request: Request) {
	try {
		let user = await request.json();
		let newUser = {
			id: users.length + 1,
			name: user.name,
		};
	
		users.push(newUser);
	
		console.log('Added user:', newUser);
	
		return new Response(JSON.stringify(users), {
			headers: { 'Content-Type': 'application/json' },
			status: 201,
		});
		} catch (error) {
			console.error('Error adding user:', error);
			return new Response(JSON.stringify({ message: 'Error adding user' }), {
				headers: { 'Content-Type': 'application/json' },
				status: 500,
		});
	}
}

Рэалізуйце даданне гарадоў, апісаным у ўроку спосабам.