Next.js › Routing (App/Pages Router)

How do you programmatically navigate to a different page in response to a user action, such as after a successful form submission?

Intermediate

Answer

In the App Router, you import the useRouter hook from next/navigation inside a client component, and call its push method with the desired path, which navigates the user to that new page without a full page reload, keeping the experience fast and smooth.

'use client';
import { useRouter } from 'next/navigation';

export default function LoginForm() {
  const router = useRouter();
  async function handleSubmit() {
    await login();
    router.push('/dashboard');
  }
  return <button onClick={handleSubmit}>Log In</button>;
}

Real-world example A login form redirects a user to their dashboard automatically after a successful sign in, using the router's push method to navigate without a jarring full page reload.

Common follow-ups: What is the difference between router.push and router.replace?;Does programmatic navigation work the same way in server components?

Client Components & Hydration;Authentication & Authorization in Next.js