skip to Main Content

I am writing a form validation program using the App Router in 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 want to obtain the data passed in by the client through POST, but it seems that I can only obtain parameters on the URL using context.searchParams and context.params.

What should I do?

Thanks.

2

Answers


  1. Chosen as BEST ANSWER

    UseRouter Handlers

    Example:

    // 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 use it in a browser http://url/test to access it


  2. you can be using form package like https://www.react-hook-form.com/ to get the values of the form and don’t forget to drop ‘use client’ on the top of the file

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search