Protected routes with middleware in NextJS - Mini Project: Build & Apply

Protected routes with middleware

📖 Scenario: You are building a Next.js app that has some pages only accessible to logged-in users. To keep your app safe, you want to block visitors who are not logged in from seeing these pages.Middleware in Next.js can help by checking if a user is logged in before letting them visit protected pages.

🎯 Goal: Build a simple Next.js middleware that checks if a user is logged in by looking for a cookie called token. If the cookie is missing, the user is redirected to the login page. Otherwise, they can access the protected page.

📋 What You'll Learn

Create a middleware file in the root of the Next.js app

Check for a cookie named token in the request

Redirect users without the token cookie to /login

Allow users with the token cookie to continue to the requested page

Apply middleware only to the /dashboard route

💡 Why This Matters

🌍 Real World

Middleware is used in real apps to protect pages that require login, like dashboards or user profiles.

💼 Career

Understanding middleware and route protection is important for building secure web applications and is a common task in frontend and full-stack developer roles.

1

Create middleware file and import NextResponse

Create a file named middleware.ts in the root of your Next.js project. Inside it, import NextResponse from next/server.

NextJS

// Your code here

Hint

Middleware files in Next.js are named middleware.ts or middleware.js and live in the root folder.

2

Create middleware function and check for token cookie

Add an exported function named middleware that takes a request parameter. Inside it, get the token cookie from request.cookies and store it in a variable named token.

NextJS

import { NextResponse } from 'next/server';

// Your code here

Hint

Use request.cookies.get('token') to read the cookie named token.

3

Redirect users without token to login page

Inside the middleware function, add an if statement that checks if token is undefined. If so, return NextResponse.redirect(new URL('/login', request.url)) to send the user to the login page.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('token');
  // Your code here
}

Hint

Use !token to check if the token cookie is missing.

4

Apply middleware only to /dashboard route

Add an exported constant named config with a matcher property set to ['/dashboard'] to apply the middleware only to the /dashboard path.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('token');
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

// Your code here

Hint

The config export controls which routes the middleware runs on.

Practice

1. What is the main purpose of middleware in Next.js when protecting routes?

easy

A. To check user authentication before allowing access to certain pages

B. To style the pages dynamically based on user preferences

C. To preload images for faster page loading

D. To manage database connections automatically

Solution

1. Step 1: Understand middleware role

   Middleware runs before a page loads to control access or modify requests.

2. Step 2: Identify protection purpose

   In protected routes, middleware checks if a user is authenticated before allowing access.

3. Final Answer:

   To check user authentication before allowing access to certain pages -> Option A

4. Quick Check:

   Middleware protects routes by checking authentication [OK]

Hint: Middleware runs before page load to check user access [OK]

Common Mistakes:

• Thinking middleware styles pages
• Confusing middleware with database management
• Assuming middleware preloads images

2. Which of the following is the correct way to export middleware in Next.js to protect routes?

easy

A. export function middleware() { /* code */ }

B. function middleware() { /* code */ } export middleware

C. export middleware = () => { /* code */ }

D. export default function middleware(req) { /* code */ }

Solution

1. Step 1: Recall Next.js middleware export syntax

   Middleware must be exported as the default export function named middleware.

2. Step 2: Check options for correct syntax

   Only export default function middleware(req) { /* code */ } uses "export default function middleware(req)" which is valid syntax.

3. Final Answer:

   export default function middleware(req) { /* code */ } -> Option D

4. Quick Check:

   Middleware uses default export function [OK]

Hint: Middleware must be default exported as a function named middleware [OK]

Common Mistakes:

• Using named export instead of default
• Assigning middleware to a variable without export default
• Incorrect export statement syntax

3. Given this middleware code snippet, what happens when a user is not authenticated?

import { NextResponse } from 'next/server';

export default function middleware(req) {
  const token = req.cookies.get('token');
  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url));
  }
  return NextResponse.next();
}

medium

A. The user stays on the current page without any change

B. The user is redirected to the /login page

C. The middleware throws an error and stops loading

D. The user is redirected to the homepage

Solution

1. Step 1: Analyze token check in middleware

   The middleware checks if the 'token' cookie exists; if not, it triggers a redirect.

2. Step 2: Understand redirect behavior

   If no token, middleware returns a redirect response to '/login' page.

3. Final Answer:

   The user is redirected to the /login page -> Option B

4. Quick Check:

   No token causes redirect to login [OK]

Hint: No token cookie means redirect to login page [OK]

Common Mistakes:

• Assuming user stays on page without token
• Thinking middleware throws error on missing token
• Confusing redirect target URL

4. Identify the error in this middleware code that aims to protect routes:

import { NextResponse } from 'next/server';

export default function middleware(req) {
  const token = req.cookies.token;
  if (!token) {
    return NextResponse.redirect('/login');
  }
  return NextResponse.next();
}

medium

A. Missing async keyword in middleware function

B. Redirect URL should be absolute, not relative

C. Accessing cookies incorrectly; should use req.cookies.get('token')

D. NextResponse.next() should be replaced with NextResponse.continue()

Solution

1. Step 1: Check cookie access method

   In Next.js middleware, cookies are accessed with req.cookies.get('token'), not req.cookies.token.

2. Step 2: Verify redirect usage

   Redirect can accept a relative path, so that is valid here.

3. Final Answer:

   Accessing cookies incorrectly; should use req.cookies.get('token') -> Option C

4. Quick Check:

   Use req.cookies.get('token') to read cookies [OK]

Hint: Use req.cookies.get('token') to read cookies in middleware [OK]

Common Mistakes:

• Using dot notation for cookies object
• Thinking redirect URL must be absolute
• Confusing NextResponse.next() with continue()

5. You want to protect only the routes starting with /dashboard using middleware. Which is the correct way to apply middleware only to these routes?

hard

A. export const config = { matcher: ['/dashboard/:path*'] };

B. export const config = { matcher: ['/dashboard*'] };

C. export const config = { matcher: ['/dashboard'] };

D. export const config = { matcher: ['/dashboard/**'] };

Solution

1. Step 1: Understand matcher pattern syntax

   The matcher uses path patterns where ':path*' matches all subpaths under /dashboard.

2. Step 2: Compare options for correct pattern

   export const config = { matcher: ['/dashboard/:path*'] }; uses '/dashboard/:path*' which correctly matches /dashboard and all nested routes.

3. Final Answer:

   export const config = { matcher: ['/dashboard/:path*'] }; -> Option A

4. Quick Check:

   Use '/dashboard/:path*' to match dashboard and subpaths [OK]

Hint: Use ':path*' to match all subpaths under a route [OK]

Common Mistakes:

• Using wildcard * without colon for subpaths
• Matching only exact /dashboard without subpaths
• Using invalid glob pattern like /**