Slide 6
Slide 6 text
Pages Router struggles
× Manual creation of API
endpoints
× Need for tRPC for type
safety
× Excess, messy code
× Not a good DX
async function onSubmit(event:
FormEvent) {
event.preventDefault();
setIsLoading(true);
setError(null); // Clear previous erro
when a new request starts
try {
const formData = new
FormData(event.currentTarget);
const response = await
fetch('/api/submit', {
body: formData,
method: 'POST',
});
if (!response.ok) {
throw new Error('Failed to submit
data. Please try again.');
}
// Handle response if necessary
const data = await response.json();
// ...
} catch (error) {
// Capture the error message to disp
to the user
setError(error.message);