0
0
NextJSframework~10 mins

HTTP method handlers (GET, POST) in NextJS - Step-by-Step Execution

Choose your learning style9 modes available
Concept Flow - HTTP method handlers (GET, POST)
Request arrives
Check HTTP method
Run GET handler
Send GET response
Request ends
When a request comes in, Next.js checks its HTTP method. It runs the matching handler (GET or POST) and sends back the response.
Execution Sample
NextJS
export async function GET(request) {
  return new Response('Hello GET');
}

export async function POST(request) {
  return new Response('Hello POST');
}
This code defines two handlers: one for GET requests and one for POST requests, each sending a simple text response.
Execution Table
StepIncoming Request MethodHandler ChosenActionResponse Sent
1GETGET handlerRun GET function'Hello GET'
2POSTPOST handlerRun POST function'Hello POST'
3PUTNo handlerNo matching function405 Method Not Allowed
4DELETENo handlerNo matching function405 Method Not Allowed
💡 Execution stops after sending response or if no handler matches the HTTP method.
Variable Tracker
VariableStartAfter GET RequestAfter POST RequestAfter PUT Request
request.methodundefinedGETPOSTPUT
handler chosennoneGET handlerPOST handlernone
responsenone'Hello GET''Hello POST'405 Method Not Allowed
Key Moments - 3 Insights
Why does a PUT request get no response from these handlers?
Because the code only defines GET and POST handlers. PUT requests have no matching function, so Next.js returns a 405 Method Not Allowed response as shown in execution_table row 3.
Can both GET and POST handlers run for the same request?
No. Only the handler matching the request's HTTP method runs. For example, a GET request runs only the GET handler (execution_table row 1).
What happens if the POST handler takes time to respond?
The POST handler is async, so Next.js waits for it to finish before sending the response. This is shown by the async function in the execution_sample.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution_table. What response is sent when the request method is POST?
A'Hello POST'
B'Hello GET'
C405 Method Not Allowed
DNo response
💡 Hint
Check execution_table row 2 under 'Response Sent'
At which step does the handler chosen become 'none' due to no matching function?
AStep 1
BStep 3
CStep 2
DStep 4
💡 Hint
Look at execution_table rows 3 and 4 for 'Handler Chosen'
If you add a PUT handler, how would the response for a PUT request change in the variable_tracker?
Ahandler chosen would stay 'none'
Brequest.method would change from 'PUT' to 'POST'
Cresponse would change from '405 Method Not Allowed' to the PUT handler's response
Dresponse would stay 'Hello GET'
💡 Hint
See variable_tracker row 'response' for PUT request and imagine adding a PUT handler
Concept Snapshot
Next.js API routes use exported async functions named after HTTP methods.
Define GET(request) for GET requests and POST(request) for POST requests.
Next.js calls the matching handler based on request.method.
If no handler matches, Next.js returns 405 Method Not Allowed by default.
Handlers return Response objects to send back data.
This pattern keeps server code clear and organized.
Full Transcript
In Next.js, when a request arrives, the framework looks at the HTTP method like GET or POST. It then runs the matching exported async function named GET or POST. For example, if the request method is GET, Next.js runs the GET handler function and sends its response. If the method is POST, it runs the POST handler. If there is no handler for the method, Next.js returns a 405 Method Not Allowed response. This way, you can organize your server code by HTTP method. Each handler receives the request object and returns a Response. This example shows simple handlers returning text responses for GET and POST. The execution table traces how requests with different methods choose handlers and what responses are sent. The variable tracker shows how request.method, handler chosen, and response change step by step. Key moments clarify why some methods get no response and how async handlers work. The quiz tests understanding of which handler runs and what response is sent. This pattern helps keep server logic clear and easy to maintain.