Level up with Forms Management with Next.js App RouterImplement a Route Handler for JSON POST Requests
Jack HerringtonThe first step in server-side validation is setting up an endpoint to send the data to. This will be an API route in our project.
Inside of the project directory, create a new file at the following path:
api/register/route.tsx
This file tells Next.js that this function will handle requests to /api/register. We use route.tsx instead of page.tsx because we want to handle HTTP methods like POST and GET directly instead of returning any HTML or React components.
Define a Route Handler
Inside of the route.tsx file, import NextRequest and NextResponse from next/server.
import { NextRequest, NextResponse } from 'next/server'
Next, we'll define a route handler for POST requests to the endpoint. The request will be of type NextRequest. We'll get the JSON payload from the request, and store it in a variable called data. The return from this function will be a NextResponse that sends a message back that the user has been registered. We'll implement the validation and database saving in the next steps:
export async function POST(req: NextRequest) {
const data = await req.json();
// Add data to the database
return NextResponse.json({ message: "User registered"});
}
Validating the Data
Remember, never trust client data implicitly. You should always use validation on both the client and server side, and make sure they match.
Therefore, let's import the schema from registrationSchema and use Zod's safeParse() function to validate the data.
The safeParse function won't throw exceptions if the data is invalid. However, it ensures that the data matches our schema. If it is successful, its output includes the cleaned data. Otherwise, it will give us errors including which fields are wrong.
We can add conditionals to the function to check and proceed accordingly:
import { schema } from "@app/registrationSchema"
export async function POST(req: NextRequest) {
const data = await req.json();
let parsed = schema.safeParse(data)
if (parsed.success) {
// Add parsed.data to the database
return NextResponse.json({ message: "User registered", data: parsed.data });
} else {
return NextResponse.json(
{ error: parsed.error },
{ status: 400 }
)
}
}
With the handler written, we can now prepare to test it on the client.
Updating the onSubmit Function
In order to test our server-side validation, we need to replace the console.log() in the onSubmit with a fetch request to api/register, using the POST method. We'll indicate that we are sending JSON data, which will be stringified. Then we'll parse the response and log it to the console:
// inside of RegistrationForm.tsx
const onSubmit = async (data: z.infer<typeof schema>) => ({
fetch("/api/register", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
});
Testing the Form on the Page
Over on the page, provide valid data in the form and hit submit. Inside the console, we should see the server response that indicates that the user is registered:
// inside the browser console
{ message: "User registered", user: { /* user data */ } }
It seems like our server-side validation is working correctly, but the browser makes it difficult to test if it's actually applying the validation.
We can test this in a terminal.
Testing Server-Side Validation from the Terminal
The curl command can be used to send an HTTP request to the server.
We'll use -X POST to specify the method, along with the localhost address to the api/register endpoint. The data will be an empty object, and we'll provide a header that specifies it's a JSON payload:
curl -X POST http://localhost:3000/api/register -d "{}" -H "Content-Type: application/json"
Hitting enter, we get a response with the "Invalid data" message and the error fields from Zod.
The First Validation Method
You have now seen the first mechanism for connecting client-side and server-side validation!
The next technique we look at will also involve a an API route, but this time instead of sending JSON is will be sending form data.
Your task is to try implementing it on your own using the following resources. When you're ready, you can check out the next video to see how it's done.
Resources for a Form Data API Route
The simplest way to send FormData to a server action is to set the type of the first parameter to FormData. Then use Object.fromEntries to convert that into a JavaScript object.
async function onFormData(formData: FormData) {
"use server";
const data = Object.fromEntries(formData);
...
}
Then over on the client side, create the FormData object using new FormData() and use the append method to set the fields before calling the server action that takes the form data as a parameter.
There is also an additional technique you could use that uses the useFormState hook that we will explore in the next video.