Redirect and rewrite in middleware in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import NextResponse from Next.js.

NextJS

import { [1] } from 'next/server';

Drag options to blanks, or click blank then click option'

Aredirect

BNextResponse

Crewrite

DuseMiddleware

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'redirect' or 'rewrite' as import instead of 'NextResponse'.

Trying to import a non-existent function like 'useMiddleware'.

The NextResponse is imported from 'next/server' to handle redirects and rewrites in Next.js middleware.

2fill in blank

medium

Complete the code to redirect users to '/login' if they are not authenticated.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const isAuth = false; // example check
  if (!isAuth) {
    return NextResponse.[1]('/login');
  }
  return NextResponse.next();
}

Drag options to blanks, or click blank then click option'

Aredirect

Brewrite

Cforward

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'rewrite' instead of 'redirect' causes the URL to stay the same.

Using non-existent methods like 'forward' or 'send'.

Use NextResponse.redirect() to send users to a different URL.

3fill in blank

hard

Fix the error in the middleware to rewrite the URL to '/dashboard' without changing the browser URL.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  return NextResponse.[1]('/dashboard');
}

Drag options to blanks, or click blank then click option'

Arewrite

Bnavigate

Csend

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'redirect' changes the browser URL, which is not desired here.

Using non-existent methods like 'navigate' or 'send'.

Use NextResponse.rewrite() to change the destination internally without changing the URL shown in the browser.

4fill in blank

hard

Fill both blanks to check if the request pathname starts with '/admin' and redirect to '/login' if true.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const { pathname } = request.nextUrl;
  if (pathname.[1]('/admin')) {
    return NextResponse.[2]('/login');
  }
  return NextResponse.next();
}

Drag options to blanks, or click blank then click option'

AstartsWith

Bredirect

Cincludes

Drewrite

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'includes' instead of 'startsWith' may cause wrong matches.

Using 'rewrite' instead of 'redirect' changes the URL invisibly.

Use startsWith to check the beginning of the pathname and redirect to send the user to '/login'.

5fill in blank

hard

Fill all three blanks to rewrite requests from '/blog/:slug' to '/news/:slug' preserving the slug parameter.

NextJS

import { NextResponse } from 'next/server';

export function middleware(request) {
  const url = request.nextUrl.clone();
  if (url.pathname.[1]('/blog/')) {
    url.pathname = url.pathname.[2]('/blog', '/news');
    return NextResponse.[3](url);
  }
  return NextResponse.next();
}

Drag options to blanks, or click blank then click option'

AstartsWith

Breplace

Crewrite

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'redirect' changes the browser URL, which is not wanted here.

Using 'includes' instead of 'startsWith' may match wrong paths.

Check if the path starts with '/blog/', replace '/blog' with '/news' in the path, then rewrite the request to the new URL.