NextResponse

Middleware in Next.js

Middleware is a mechanism that is used to perform tasks before rendering a page. It allows you to intercept requests before they reach the page component. It enables you to perform operations like authentication, authorization, data fetching, and modifying the request or response objects....

Benefits of Middleware

It can handle user authentication and authorization processes.It is used to manage user sessions and handle session creation, tracking, and expiration.It is used to validate user input to prevent common security vulnerabilities such as cross-site scripting (XSS), and SQL injection.It can add, modify, or remove HTTP headers in incoming or outgoing requests and responses. It can be used to redirect users at the server level based on user role....

Convention

In Next.js, you can implement middleware by creating middleware.js (or .ts) file in a project root directory(you have to create a middleware.js file inside src folder.)....

Matching Paths

The middleware file will be invoked for every route in your project, If you want to apply to any specific route then you have to mention a route matcher inside middleware.js file...

NextResponse

The NextResponse API empowers you to:...

Using Cookies

Cookies function as standard headers. During a request, they reside in the Cookie header, while in a response, they are located within the Set-Cookie header. Next.js simplifies cookie management with its cookies extension on NextRequest and NextResponse....

Setting Headers

Indeed, with the NextResponse API, you can effectively manage both request and response headers. This capability has been available since Next.js version 13.0.0....

CORS

This middleware function adds CORS headers to the response to allow requests from any origin, methods, and headers. For preflighted requests (OPTIONS method), it responds immediately with appropriate headers and a status code of 200....

Producing Response

Directly responding from Middleware is supported by returning either a Response or NextResponse instance. This functionality has been available since Next.js version 13.1.0....

Steps to Setup a NextJS App

Step 1: Create a NextJS application using the following command and answer some few questions....