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!
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
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>
)
}
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