A comprehensive guide on utilizing matcher in Next JS middleware

Question

A comprehensive guide on utilizing matcher in Next JS middleware

Attempting to utilize a matcher in my Next.js middleware, but the documentation lacks detailed instructions on implementing this functionality.

The only information provided is the following code snippet, without clarification on where it should be placed or how to use the configuration in the middleware file:

export const config = {
  matcher: '/about/:path*',
}

Does anyone have a functional example of setting up the matcher for a middleware file in Next.js?

Appreciate any assistance. Thank you.

next.js middleware matcher

Answer 1

Answer №1

1.Step 1: Configuration Matching

To configure your middleware, you need to export an object named config from your middleware file:

middleware.js || middleware.ts

//middleware.js

export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/about-2', request.url))
}

export const config = {
  matcher: '/about/:path*',
}

2.File-Based Routing

|-- pages/
│   ├── auth/
│   │   ├── index.js
│   │   └── middlware.js(1)
│   |
│   |── index.js
|   |── middleware.js(2)
|__________________________


//middleware.js(1) will only run on /auth pages

//middleware.js(2) will run on all routes)

Answer 2

1.Step 1: Configuration Matching

To configure your middleware, you need to export an object named config from your middleware file:

middleware.js || middleware.ts

//middleware.js

export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/about-2', request.url))
}

export const config = {
  matcher: '/about/:path*',
}

2.File-Based Routing

|-- pages/
│   ├── auth/
│   │   ├── index.js
│   │   └── middlware.js(1)
│   |
│   |── index.js
|   |── middleware.js(2)
|__________________________


//middleware.js(1) will only run on /auth pages

//middleware.js(2) will run on all routes)

Answer 3

Answer №2

When I was learning this framework, I encountered the same issue. I am using nexjs version 12.2.0. To ensure that the middleware runs properly, you must place the middleware.ts or middleware.js file in the source directory and define the config matcher in it.

In Next.js 12.2, create a single file called middleware.ts in the root directory of your project (next to package.json):

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware (request: NextRequest) {
  return NextResponse.next()
}

export const config = {
  matcher: ['/api/hello/:helloId'],
}

Answer 4

When I was learning this framework, I encountered the same issue. I am using nexjs version 12.2.0. To ensure that the middleware runs properly, you must place the middleware.ts or middleware.js file in the source directory and define the config matcher in it.

In Next.js 12.2, create a single file called middleware.ts in the root directory of your project (next to package.json):

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware (request: NextRequest) {
  return NextResponse.next()
}

export const config = {
  matcher: ['/api/hello/:helloId'],
}

A comprehensive guide on utilizing matcher in Next JS middleware

Answer №1

Answer №2

Similar questions

What is the best method for navigating and passing data in dynamic routing with NEXT.JS?

NextJS introduces a unique functionality to Typescript's non-null assertion behavior

Creating a realistic typewriter effect by incorporating Code Block as the input

Having continual issues with OAuthCreateAccount error on Next.js with Next Auth using Google as the provider

Integrating FCM with NextJs for enhanced push notification

The environmental factors in Turbo are crucial for optimizing performance

When attempting to launch a Next.js application, the status of the npm run dev command remains unchanged

Is there a way to customize Material UI's <Pagination> component to adhere to dark mode preferences?

International component dominates over other elements

What is the best way to add a button over an image using Tailwind CSS in Next.js?

Tips for including an ID as the final segment of a URL in next.js

Troubleshooting routing problems in a Next.js application hosted on Azure's static web app

How can we use SWR to fetch user data conditionally based on their logged-in state?

What steps can be taken to resolve the error message "Module '../home/featuredRooms' cannot be found, or its corresponding type declarations"?

What is the process for obtaining a client-side cookie using next.js?

I am looking to change the state of only the element that is being moused over in a React Hooks useState function, rather than changing the

Exploring the power of caching fetch requests with Next.js version 14

What causes the disparity in outcomes between an API request using node-fetch versus the built-in fetch in Node.js?

How can I download a PDF file in React.js using TypeScript on Next.js?

In NextJs SSR, external components from a different package do not inherit styles when applied