Posted on Sep 26 Now I will implement an important function in Next.js. That is we need to handle Middleware, so what is middleware for? We can understand as follows:Middleware is used to handle problems. When a request needs to run into our software, it needs to go through this Middleware first. What's the point of going through it first? Let's go through it to check if the user information is valid or not, check such as: origin , cookie , pathname , hostname , header , ..... that we allow access to the routers in the application . Depending on the application we install, please checkIf you have worked on Middleware in Laravel, or React, then you can imagine, it's the same.Example:Laravel: then we need to create Middleware to check the user's Authentication or check Role , Group , Permissions ,...React: we often use middleware in the libraries _Redux , Redux-Toolkit , Redux-Saga _,...NextJS : I create a Middleware file at the same level as app, pages , or inside src . It will check every route passing through the applicationOkay, first I will create a middleware.ts file at the same level as the app folderIf you look at the code above, I use it to check the origins that allow access to the applicationBesides, in function middleware we can check parameter values ​​such as *method *, *origin *, *url *, *host *. These values ​​are essential when we authenticate where user requests come from, what website, and what methods are allowedNext we can check whether origin is in the origin array we allow or not. If not, the response will be 404The following paragraph is also easy to use: Access-Control-Allow-Credentials : allows the browser to send CORS requests with authentication information (like a cookie or another credential)Access-Control-Allow-Origin : defines the origin to which the browser is allowed to send CORS requestsAccess-Control-Allow-Methods : defines the HTTP methods that the server accepts from browsers sending CORS requestsAccess-Control-Allow-Headers : defines optional HTTP headers that the browser can include in CORS *requests. This is important if you want to allow the browser to send other custom headers. In this case, a list of headers is listed, including *X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X- API-VersionNext we can provide some routes to let the Middleware know how to check our important routes, we can customize it, as desired.The matcher config above, if you do not also provide Middleware, it will by default scan the entire application route, you can see the image here.If you tell the Middleware which routes to check, it will only check those routes.For example, I only provide middleware checks in the** /api/:path* **route . Then it only checks at that linkOkay, now let's check it outWe see that there is no cors warning, so it's okLet's try another siteGetting a Cors error because our application is in development state , not yet available ( production )There are many things you can check, such as checking whether you are using the phone or notOr for example, check the pathname*_ "/api/post/12"_* changes to /api/post/99The Article : Create A Middleware In NextJS 13Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Chandra Prakash Pal - Sep 6 Francisco Inoque - Sep 17 Juan Carlos Valerio Barreto - Sep 4 ng-news - Sep 5 Once suspended, skipperhoa will not be able to comment or publish posts until their suspension is removed. Once unsuspended, skipperhoa will be able to comment and publish posts again. Once unpublished, all posts by skipperhoa will become hidden and only accessible to themselves. If skipperhoa is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Nguyễn Thanh Hòa. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag skipperhoa: skipperhoa consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging skipperhoa will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.