Effortless Protected Routes In Next.js Using Middleware

In the world of web applications, protecting sensitive routes is crucial for maintaining security and user privacy. This blog post will guide you through implementing protected routes in Next.js using middleware. We will explore the concepts of middleware, how it functions within Next.js, and provide a step-by-step demonstration of creating protected routes.

Understanding Protected Routes

Protected routes are those that require user authentication before granting access. For instance, consider a scenario where you want to restrict access to a blog page only to users who are logged in. Implementing such a feature ensures that your application's sensitive data remains secure.

What is Middleware?

Middleware is a powerful concept in Next.js that allows you to run code before a request is completed. It acts as a bridge between the request and response cycle, enabling you to modify the request or response, redirect users, and more. Essentially, middleware runs "in the middle" of the process, allowing you to enforce rules or conditions before the final response is sent back to the client.

Setting Up Your Next.js Project

To get started, we will create a new Next.js application. Use the following command in your terminal:

npx create-next-app@latest middleware-tutorial

Make sure to choose the app router and Tailwind CSS during setup. Once the project is created, navigate to the project directory and open it in your code editor.

Creating Routes

now we create route home. in app/home/page.tsx

Implementing Middleware

To protect the admin route, we will create a middleware file. In the root directory of your project, create a file named middleware.js. This file will contain the logic for protecting the routes.

import { NextResponse } from "next/server";
export async function middleware(request:Request){
const user = false;
if(!user){
    return NextResponse.redirect(new URL('/',request.url))
}else{
    return NextResponse.next()
}
}

export const config ={
    matcher: ['/home']
}

This middleware checks if a user is authenticated. If not, it redirects them to the homepage. If the user is authenticated, it allows the request to proceed.

Using the Config Matcher

To ensure that the middleware only runs for specific routes, we can use the config export. This allows us to specify which paths the middleware should affect. Add the following code to your middleware.js file:

export const config = {
  matcher: ['/admin'],
};

With this configuration, the middleware will only run for the /home route. You can test this by attempting to access both the blog and admin pages. The blog page should remain accessible, while the admin page should redirect you to the homepage if you are not authenticated.

Testing the Implementation

Run your application using:

npm run dev

Now, navigate to /home You should be able to access the blog page without restriction, while the admin page will redirect you to the homepage because the user is not authenticated.

Conclusion

In this tutorial, we explored how to implement protected routes in Next.js using middleware. By leveraging middleware, we can efficiently handle user authentication and ensure that only authorized users can access sensitive areas of our applications. This approach not only enhances security but also improves the overall user experience.

For further exploration, consider integrating a real authentication provider like Supabase or Auth0 to manage user sessions effectively. Happy coding!