How To Dev

Introduction NextJS Proxy and Rewrites are a powerful duo that helps manage and route requests flexibly. NextJS Rewrites act as an internal proxy, essentially mapping one URL path to another. Its biggest advantage is hiding the actual URL of the underlying core server, while transforming requests from Cross-Origin to Same-Origin on the client interface. NextJS Proxy  allows you to execute code before a request is completed. As a result, you can easily intervene to implement features like Authentication, authorization, or centralized Rate Limiting, reducing the load on the core API server and maximizing performance. Previously, this function was called middleware, the name change to Proxy aims to confirm that this is an ultra-lightweight Gateway layer: It should only be used for tasks such as Routing, Rewrite, Redirect and managing Header/Cookie. NextJS encourages moving Granular Authorization logic or complex session management into Server Components or Server Actions to take...

Introduction In the previous article, I guided you on using rewrites and proxy in NextJS. Now, we will go into a specific case to set up rate limit directly from the NextJS server to reduce the actual number of requests sent to the core service. Also in this article, I will guide you on how to configure NextJS as a reversed proxy to avoid CORS errors on the browser effectively. CORS (Cross-Origin Resource Sharing) is an HTTP-based security mechanism enforced by browsers to prevent websites from sending requests to a domain different from the current website domain (except when the target domain explicitly permits it via response HTTP headers). When the browser makes an API request to a cross origin target and the server has not configured allowance for that domain, the following error occurs: Solutions Browser-side handling (exercise caution, not recommended): you can use certain extensions or disable this feature on the browser to bypass it, but the risk is extremely high because thi...