What is the recommended location for Next.js middleware placement?

I am currently utilizing version ^13.5.3 of Next. I have created a middleware.js file in the pages/middleware.js directory

import { NextResponse } from "next/server";
 
export function middleware(req) {
 ...
}

This is resulting in the following error: ESLint: next/server should not be imported outside of pages/_middleware.js. Refer to: https://nextjs.org/docs/messages/no-server-import-in-page(@next/next/no-server-import-in-page)

The documentation states: Only import and use next/server in a file located within the project root directory: middleware.{js,ts}.

I tried moving it to the root directory.

https://i.sstatic.net/fPyLz.png

However, I received this new error: ESLint: next/server should not be imported outside of pages/_middleware.js. See: https://nextjs.org/docs/messages/no-server-import-in-page(@next/next/no-server-import-in-page)

Upon changing it to pages/_middleware.js, I encountered an error while building. This has left me feeling quite perplexed.

https://i.sstatic.net/5ULWi.png

My Inquiries:

  1. Should the middleware file be prefixed with "_"?
  2. Where should I locate the middleware file in order to utilize "NextResponse"?

Answer №1

Ah, now I see the reason behind it.

The version of my "eslint-config-next" is 12.0.8

After updating to the latest version, the issue has been resolved. Apologies if this caused any inconvenience.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing an array to cycle through various images

Initially, I'm facing an issue with morscreens[i] not displaying the desired image from the array. When left as it is, it ends up showing a [<] button followed by "morscreens[i]" and then a [>] button. However, enclosing morscreens[i] in quotes ...

The attempt to retrieve Next13 from localhost:8000 was unsuccessful

I'm encountering an issue with fetching data from next13 in Django while running on localhost:8001. The error message I receive is as follows: TypeError: fetch failed at Object.processResponse (node:internal/deps/undici/undici:7188:34) at nod ...

Enhancing HTML through Angular 7 with HTTP responses

Sorry to bother you with this question, but I could really use some help. I'm facing an issue with updating the innerHTML or text of a specific HTML div based on data from an observable. When I try to access the element's content using .innerHTM ...

Shadows in Three.js cascading onto clear surfaces with a low-resolution twist

Here's the problem I'm facing: I want to remove the shadows on the text but changing the shadowMap resolution doesn't seem to have any effect. This is the code snippet responsible for creating the mesh: var materialArray_Flying = [ ...

What is causing my props to return the index along with its value?

My variable named "subject" holds the string "Test". I am passing it to a props child using the following method: onRowSelect(slotProps) { this.subject = { ...slotProps.data.subject.split() }; } Upon receiving the value of "subject" in my compo ...

What is the best approach to bring a button into focus after it has been enabled in a React.js application

I'm a beginner in react js and I'm attempting to set the focus on a button after filling out all input fields. However, despite programmatically enabling the button with autoFocus implemented, I am unable to focus on it. return ( < ...

"Implementing a comment system using Node.js and MySQL: A comprehensive guide

Hey there! I have some data that I want to use to create a hierarchical data example. { id_commentForum: 1, id_user: 1, id_thread: 1, comment: 'This is the First Comment', parent: 0, created_at: Wed Jun 22 2016 13:36:38 G ...

Setting up Environment Variables on Vercel for your nextjs deployment

I am facing a dilemma with deploying environment variables to Vercel while working on my project using next.js. Specifically, we are attempting to integrate the Stripe Payment Gateway into our Vercel deployment. To achieve this, I downloaded the sample c ...

Exploring the Functionality of Cookies in Nuxt 3 API Endpoints and Middlewares

Can cookies be utilized on the server side in Nuxt 3? For instance, I need to set a cookie in an API and then access its data in middleware: // ~/server/api/testApi.ts export default defineEventHandler(event => { /* setCookie('myCookie', ...

The multiple-choice selection tool is not displaying any choices

I am having an issue with my ng-repeat code in conjunction with the jquery multiple-select plugin. Despite using this plugin for a multiple select functionality, the options generated by ng-repeat are not visible. Below is the code snippet in question: & ...

Can a plugin be executed as a test?

I am currently using HTMLhint, however, I would like to have it run as a test rather than just through the command line plugin. Is there a way to achieve this and if so, how can I do it? I have searched online but haven't been able to find a solution ...

Looking to update the URLs in the text data to a different value

I am facing an issue with a list of links stored in a string. var data='<ol> <li><a href="#/getpage/getData/1">A Christmas Carol</a></li> <li><a href="#/getpage/getData/2">Copyright</a></li ...

Tips for stopping </p> from breaking the line

<p>Available: </p><p style={{color:'green'}}>{props.active_count}</p><p>Unavailable: </p><p style={{color:'red'}}>{props.inactive_count}</p> https://i.sstatic.net/NQo5e.png I want the ou ...

Updating time format in JSON code for AmCharts styling

Currently, I am in the process of creating a chart with AmCharts. Specifically, I am focusing on the stocklegend section. "stockLegend": { "valueTextRegular": "[[time]]:[[value]]" } In this scenario, the 'time' refers to a Date object that has ...

The range slider is malfunctioning in the audio player, JQuery, and HTML

I have been struggling with getting the Range slider to work on my custom-built mp3 player using jQuery. Despite trying various codes from different sources, I can't seem to get it to function correctly. Strangely enough, it works fine on Mozilla brow ...

Waiting for POST request to be executed once data is inserted

This was a new experience for me; I took a break from working on the project for a while, and suddenly all POST routes stopped functioning. However, the GET routes were still working perfectly fine. After extensive debugging, I discovered that removing the ...

Error in Firebase admin SDK FCM: Only one of the parameters topic, token, or condition is mandatory

I encountered an error message while trying to send FCM notifications with multiple tokens. This was working fine before, but now I'm getting the following error: 0|api | 2020-2-11 13:26:26 [ExceptionsHandler] Exactly one of topic, token or co ...

Unusual behavior observed when routing onScroll in Next.js, with rendering occurring exclusively on the server side

In my attempt to leverage Next.js imperative routing api within a scroll handler for page navigation, I encountered an almost perfect solution by attaching it to the window. However, there is a slight color 'flash' as the scroll position resets w ...

Trouble encountered when trying to populate a dropdown column with dynamic data using ajax

In an attempt to populate and append a column, such as Id, with dynamic data using jQuery and AJAX. The data is supposed to be fetched via a rest webservice but seems to be not populating correctly. Below is the code snippet: This pasted code may not wo ...

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...