CODEWITHSUNDEEP
javascriptreactjsformshttp-redirectnext.js
user4690275
user4690275

Reputation:

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

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!

Upvotes: 9

Views: 39987

Answers (4)

curious developer
curious developer

Reputation: 91

make it server side with this trick:

page.tsx(.jsx)

<form action="/yourCustomPath">
 <input type="text" name="user-input" />
 <button type="submit"> Submit </button>
</form>

in next.js middleware.ts(.js) file

export function middleware(request) {
    if (request.nextUrl.pathname === `/yourCustomPath`) {
      const userInput = request.nextUrl.searchParams.get("user-input");
      return Response.redirect(new URL(`/yourCustomPath/${userInput}`, request.nextUrl))
    }
}

Upvotes: 0

shobe
shobe

Reputation: 401

You can use useRouter hook to navigate to another page. For example:

import { useRouter } from "next/router";

const Component = () => {

  const [inputValue, setInputValue] = useState("");
  const router = useRouter();
  
  const onChange = e => {
    setInputValue(e.target.value);
  }

  const handleSubmit = e => {
    e.preventDefault();
    router.push(`/channel/${inputValue}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={onChange} />
    </form>
  )

}

Upvotes: 7

Himanshu Jangid
Himanshu Jangid

Reputation: 385

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

Upvotes: 19

Mentlegen
Mentlegen

Reputation: 1238

To handle redirections in Next.js, you can use the router hook useRouter() available in any component, with push. You can find a good explanation in the documentation.

Depending on the way you handle your form, you could have a callback on the button, or handle it with the onSubmit of the form.

About react forms: react forms

About handling button click in React: react buttons

Upvotes: 3

Related Questions