Seamless URL Redirection in Next.js 14: Handling Conditional Redirects

In web development, ensuring that users land on the correct pages based on their input or actions is crucial. With Next.js 14, handling conditional redirects, particularly when using dynamic routing in the new app directory, has become more streamlined and powerful. In this guide, I’ll walk you through the process of setting up a 302 redirect based on a URL parameter, using TypeScript for robust type safety. By the end, you’ll be equipped to handle similar scenarios in your projects effectively.

Thank me by sharing on Twitter 🙏

Introduction

Redirecting users based on specific URL parameters is a common requirement in web applications. Whether it’s to reroute users to a home page, a login page, or any other destination based on a given condition, mastering this technique can enhance user experience and ensure seamless navigation. In this blog post, I’ll demonstrate how to set up a conditional redirect in Next.js 14 using the new app directory and TypeScript. The example we’ll explore involves redirecting users based on a zip code parameter.

Setting Up the Route

First, let’s set up our dynamic route. In the new app directory, create a folder named services and within it, another folder with the dynamic parameter [zipCode]. Inside this folder, create a page.tsx file. This file will serve as the entry point for our dynamic route.

Here’s how your folder structure should look:

Plaintext

app/
└── services/
    └── [zipCode]/
        └── page.tsx

Implementing the Conditional Redirect

Next, we’ll implement the conditional redirect based on the zip code. In our example, if the zip code is 12345, we want to redirect the user to the home page. Otherwise, we render the page normally.

Open page.tsx and add the following code:

TypeScript

import { redirect } from 'next/navigation';

interface ServicePageProps {
  params: {
    zipCode: string;
  };
}

export default function ServicePage({ params }: ServicePageProps) {
  const { zipCode } = params;

  if (zipCode === '12345') {
    redirect('/');
  }

  return (
    <div>
      <h1>Services for {zipCode}</h1>
      {/* Add your page content here */}
    </div>
  );
}

export function generateStaticParams() {
  return []; // Return an empty array if you don't have static params to generate
}

Explanation of the Code

Importing the redirect Function:
We start by importing the redirect function from next/navigation. This function allows us to perform client-side redirects.
Defining the Props Interface:
We define an interface ServicePageProps to type the params object. This ensures that our zipCode parameter is properly typed and accessible within the component.
Implementing the Redirect Logic:
Inside the ServicePage component, we extract the zipCode parameter from the params object. We then use an if statement to check if the zip code equals 12345. If it does, we call the redirect function to redirect the user to the home page.
Rendering the Page:
If the zipCode is not 12345, the page renders normally, displaying a heading with the zip code.
Using generateStaticParams:
We include an empty generateStaticParams function. This function is useful for generating static parameters if you have predefined routes. In our case, it returns an empty array since we don’t have static params to generate.

Enhancing User Experience with Redirects

Implementing conditional redirects enhances user experience by ensuring they are navigated to the most relevant pages. For example, redirecting users to a login page if they are not authenticated, or to a specific page based on their profile settings, can make the application more intuitive and user-friendly.

Practical Use Cases

Authentication Redirects:
If a user tries to access a restricted page without being logged in, you can redirect them to the login page.
Geo-Location Based Redirects:
Redirect users to region-specific pages based on their IP address or provided location data.
Feature Access Redirects:
Redirect users to different pages based on their subscription level or feature access rights.

Conclusion

Handling conditional redirects in Next.js 14 using the app directory and TypeScript is straightforward and powerful. By leveraging the redirect function and dynamic routing, you can ensure users are directed to the most relevant pages based on their actions or input. This not only improves the overall user experience but also helps in managing application flow more efficiently.

In this guide, we’ve explored a practical example of redirecting users based on a zip code parameter. This technique can be extended to various scenarios, making your Next.js applications more responsive and user-friendly. As you continue to build and refine your web applications, mastering these redirection techniques will undoubtedly become an invaluable skill in your development toolkit.