Redirect to another page based on form input in Next.js

Question

I'm just getting started with Next.js and SPA world. I'm used to PHP and plain JS so this is totally new to me.

So I have a form with basically a text input and a submit button. What I need to do is as simple as redirecting the user based on the text field they submit but I can't figure out how.

For example: the form is in the homepage, the user inputs "foo" and submits. What the result should be is that the user is redirected to "/channel/foo".

Any tip? Thank you!

Answer 1

Ok.. For this you can use useRouter hook provided by the nextjs

first you can import it

import { useRouter } from "next/router";

then you can create it's instance and use it to push the react app to new route based on the value of the given form input value

Here I am using a react state to go to new route

import {useRouter} from 'next/router'
import {useState} from 'react'
export default function SampleComponent(){
    const router = useRouter()
    const [route, setRoute] = useState()
    const handleSubmit = (e) => {
        e.preventDefault()
        router.push("someBasePath/" + route)
    }
    return(
        <div>
            <h1>Example Form</h1>
            <form onSubmit={handleSubmit}>
                <input type="text" name='route' onChange={(e)=>{setRoute(e.target.value)}} />
                <button type="submit">Submit</button>
            </form>
        </div>
    )
}

I hope you are familial with react and useState hook

I hope it will solve your problem