Setting up proxy in the past was a nightmare.
We would have to introduce some external libraries like express-http-proxy, http-proxy-middleware, you name it!
.. Maybe you’re already asking what a proxy mean?
Okay, let’s talk about it a bit.
Imagine you’re a kid at school, and you want to ask someone out on a date, but you don’t want to do it yourself, probably because you’re shy or something. So, you’ll want to ask someone to do it for you.
The person you asked to ask for you was a proxy.
The same thing applies in programming, the same thing applies.
Let’s say you’re set out to build the frontend part an app, and you’ll be making some requests to an external API that doesnt support CORS (Cross-Origin Resource Sharing)
When you’re set to make a request to the external API, You’ll likely end up with an error.
You can get around that with a Proxy server,
The Proxy server can be an instance of Express.js/Nest.js, or any server instance.
So.. what’s about Next.js?
When you’re able to create a REST API on the fly, you would want to return some kind of Response from the API.
Let’s see an example below.
// api/route.ts
export const GET = async () => {
return Response.json({ message: "Hello world" });
};
Recently, Next.js worked on improving the Response object by adding some functions like redirects, rewrite, etc. so.. it’s now written as:
// api/route.ts
import { NextResponse } from "next/server"
export const GET = async () => {
return NextResponse.json({ message: "Hello world" });
};
With Next.js’s response rewriting, you can modify the responses returned by your Next.js API routes or pages before they are sent to the client.
Let’s try to understand the concept with another example.
Supposed you joined team to work on an ecommerce application, and the route that users would purchase a product from has the following construct https://ecomstore.com/purchase-now
After doing some analysis about how users react to the app, you find out that they do not end up purchasing items because they do not like the url construct they would purchase from.
So.. they suggested you use https://ecomstore.com/purchase
You quickly begin to write a fresh logic for purchase, with implementing new routes and updating things related to purchase all over the codebase.
But.. there’s already too many moving parts with how different services talks to one another.
Who knows? you might introduce too many bugs for nothing
But.. with Next.js rewrites, it’s very possible to solve such problem with less than 10 lines of code 😉
All you would have to do in that case is to setup a middleware, and apply the rewrite logic to all requests coming to https://ecomstore.com/purchase-now
Here’s an example.
// middleware.ts
async function middledware (req: NextRequest) {
const url = req.nextUrl
if (url.pathname === "/purchase-now") {
// rewrite to the new purchase route
return NextResponse.rewrite(new URL("/purchase", url))
}
}
export default middleware
Indeed, with less than 10 lines of code, you’re up with a solution that works super well.
This means that, whether a user tries to access https://ecomstore.com/purchase-now, they’ll always end up at https://ecomstore.com/purchase .
How cool is that?
If you found this helpful, please consider following me on Linkedin, reacting to this post, leaving a comment, or support me by buying me a coffee here.
Ehm… If you read up to this point, you’re awesome 🎸!
I don’t think that the title for this article is the best for the content that was written.
So.. please, feel free to send some ideas.
Also, If you haven’t checked the other of my articles, i highly recommend it.
⚡ I keep writing about stuffs that i learn everyday. if you want to learn, then follow along.
Whenever you’re ready to increase your income or level up as a develoeper, There are 2 ways I can help you:
- If you are want to launch a startup in days and not weeks, you should use ShipFast. It’s the #1 NextJS boilerplate to ship startups in days and not weeks. it’s loved and trusted by 2000+ developers. some of its core features are custom components, Authentication with NextAuth.js, Automatic emails with Mailgun, Payments with Stripe, and many more 🚀 …
- If you want a TLDR library that gives you the key insights across 50+ articles in less than 1 hour, get it here.
The library covers insights about Leading projects, Career growth, Mentorship, Managing Influence, etc.