Getting POST data in Next.js is a common task that requires understanding of how the

Question

Getting POST data in Next.js is a common task that requires understanding of how the

I am currently working on a form validation project using the App Router within Next.js.

// app/register/page.tsx
export default function Register(context: any) {
    console.log("Register page", context.params, context.searchParams);
    return (
        <form method={'POST'} action={'/register'} >
            <input name="usr"/>
            <input name="pwd"/>
            <button type={'submit'}>Submit</button>
        </form>
    );
}

I'm trying to figure out how to retrieve the data sent by the user through POST, but it appears that I can only access parameters from the URL using context.searchParams and context.params.

Any suggestions on what steps I should take next?

Thanks for your help!

javascript next.js

Answer 1

Answer №1

Try implementing Router Handlers

For instance:

// app/test/route.ts

import {NextResponse} from 'next/server'

export async function POST(request: Request) {
    const res = await request.json()
    console.log(request);
    console.log(res);
    return NextResponse.json({hello: 'world'})
}

You can test it in a web browser by accessing http://url/test

Answer 2

Try implementing Router Handlers

For instance:

// app/test/route.ts

import {NextResponse} from 'next/server'

export async function POST(request: Request) {
    const res = await request.json()
    console.log(request);
    console.log(res);
    return NextResponse.json({hello: 'world'})
}

You can test it in a web browser by accessing http://url/test

Getting POST data in Next.js is a common task that requires understanding of how the

Answer №1

Similar questions

Error in Typescript: Cannot assign type 'string[]' to type 'string'

The process of AJAX polling a JSON-returning URL using jQuery's $.ajax() method does not appear to provide up-to-date responses

"Create a React-Bootstrap Navbar featuring a distinctive design with 2 rows

Activate radio button exclusively for admin user

Improving React efficiency: What techniques can be used to prevent the entire component from re-rendering every time a prop changes?

Is there a way to prevent a premature closure of a connection?

Is it within the realm of possibility for a route-handling function to accept more than two parameters?

React suspense triggers a fallback reload

Unable to find the specified element within Gmail

What is the best way to add a base path to every route managed by Next.js?

Reorder elements in CSS Grid

Efficiently convert a JSON array into an HTML table using the Jquery

Activate the bootstrap modal display using PHP code

Exploring the integration of Firebase with the latest NextJS 13 Server Components

Is it possible to validate only the fields that are currently visible using HTML form validation

Vue 3 project experiencing issue with Bootstrap 5 tabs failing to update upon tab click

Running concurrently, the JavaScript if and else statements execute together

Attempting to access an avatar image via an API, only to encounter an error message indicating that the avatar is not defined

CSS styling doesn't take effect until the page is reloaded due to the failure of cssText

Organizing a list based on the text within span elements using either jQuery or underscore