Next.js provides powerful tools to handle redirects efficiently within your application. Whether you're building client-side or server-side applications, you can use Next.js's built-in redirect functionality to seamlessly navigate&redirect users from one page to another.
Next.js Redirect to Another Page Tutorial
This tutorial will walk you through different methods of implementing redirects in Next.js based on the latest documentation.
1. Redirecting Using the redirect() Function (Server Components & API Routes)
Next.js provides a built-in redirect() function, primarily used within server components and API routes. This function enables immediate redirection without rendering any UI.
Example Usage:
import { redirect } from 'next/navigation';
export default function Page() {
redirect('/dashboard'); // Redirects users to /dashboard
return null;
}
Key Points:
- Can only be used inside server components or API routes.
- Immediately stops further execution and redirects the user.
- Ideal for enforcing authentication checks or route guards.
2. Redirecting with Next.js Configuration (next.config.js)
You can define redirects globally within next.config.js to automatically handle redirections at the server level.
Example Configuration:
module.exports = {
async redirects() {
return [
{
source: '/old-route',
destination: '/new-route',
permanent: true, // Use false for temporary redirects
},
];
},
};
Key Points:
- Works at the framework level.
- Best suited for handling SEO-friendly 301 (permanent) or 302 (temporary) redirects.
- Redirects happen before rendering, improving performance.
3. Client-Side Redirecting Using next/router
For client-side redirection, Next.js provides the useRouter() hook. This is useful when you need to redirect users based on interactions, like button clicks.
Example Usage:
'use client';
import { useRouter } from 'next/navigation';
export default function HomePage() {
const router = useRouter();
const handleRedirect = () => {
router.push('/dashboard');
};
return (
<div>
<h1>Welcome to Home</h1>
<button onClick={handleRedirect}>Go to Dashboard</button>
</div>
);
}
Key Points:
- Works only in client components.
- Useful for handling redirects triggered by user interactions.
- Uses
router.push()for smooth navigation without full page reloads.
4. Redirecting with Middleware
Middleware in Next.js allows you to run code before requests complete, making it useful for dynamic redirection based on conditions.
Example Middleware for Redirecting Unauthorized Users:
import { NextResponse } from 'next/server';
export function middleware(req) {
const isAuthenticated = false; // Replace with actual auth check
if (!isAuthenticated) {
return NextResponse.redirect(new URL('/login', req.url));
}
}
export const config = {
matcher: ['/dashboard/:path*'], // Apply middleware to these routes
};
Key Points:
- Executes before the request is completed.
- Ideal for authentication, permissions, and access control.
- Allows flexible, condition-based redirection.
Choosing the Right Redirect Method
| Method | Use Case |
|---|---|
redirect() function | Server-side enforcement of redirection |
next.config.js redirects | SEO-friendly, global redirections |
useRouter().push() | Client-side navigation |
| Middleware | Conditional access control |
Each method serves a different purpose, and selecting the right approach depends on whether you need client-side navigation, server-side enforcement, or SEO optimization.
Nextjs Redirect to Another Page: Conclusion
Next.js offers flexible redirection strategies suitable for different scenarios. Whether you need client-side, server-side, or global redirects, these methods will help ensure smooth navigation and a better user experience.
For more details, check the official Next.js documentation:
Start implementing efficient redirects in your Next.js app today!