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

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

}

Answer 2

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

Answer 3

I was using the wrong command.

If anyone comes across this, use .Count instead of .HasArray