Скачать или смотреть How to Redirect to Another Page Based on Form Input in Next.js

Learn how to easily redirect users based on form input with Next.js using the `useRouter` hook!
---
This video is based on the question https://stackoverflow.com/q/70487236/ asked by the user 'demetriomontalto' ( https://stackoverflow.com/u/4690275/ ) and on the answer https://stackoverflow.com/a/70487521/ provided by the user 'Himanshu Jangid' ( https://stackoverflow.com/u/15781928/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Redirect to another page based on form input in Next.js

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Redirecting Users Based on Form Input in Next.js

If you're diving into the world of Next.js and single-page applications (SPAs), you may find yourself needing to redirect users based on their input in a form. This can feel a bit different from the PHP and plain JavaScript you might be used to, but don’t worry! In this guide, we’ll walk through a straightforward way to achieve this using the useRouter hook that Next.js provides.

The Problem

You have a form on your Next.js homepage with a simple text input and a submit button. When a user inputs a value and submits the form, you want them to be redirected to a specific page based on that input. For example, if the user types in "foo" and hits submit, they should be redirected to /channel/foo. It sounds simple, but figuring out how to implement this may be challenging if you're new to React and Next.js.

The Solution

To get started, you'll need to use the useRouter hook. This hook allows for programmatic navigation in Next.js applications. Here’s how to implement the redirection step-by-step:

Step 1: Import useRouter

First, you will need to import the useRouter hook from Next.js:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Create Your Component

Next, create a functional component for your form. This is where you'll manage the input and handle the form submission. Here’s a full example of how you can do that:

[[See Video to Reveal this Text or Code Snippet]]

Understanding the Code

useRouter: This hook allows you to access the router object, which provides methods for navigation, such as push which we use to redirect the user.

useState: We’re using the useState hook to manage the input value from the text field. This allows us to store the user's input.

handleSubmit: This function is triggered when the form is submitted. It prevents the default behavior and uses the router.push method to redirect the user based on their input.

Conclusion

And there you have it! With just a few lines of code and understanding the use of hooks in React, you can redirect users to a different page based on their form input in your Next.js application. This simple form handling technique enhances user experience and allows you to build seamless navigation within your application.

Feel free to experiment with this example to see how you can customize it further! If you have any questions or need assistance, don't hesitate to reach out.