Creating a dynamic map in the edge

A few months ago, Wes Bos tweeted "Really neat feature of the new SvelteKit website, this dynamic SVG is rendered on the edge and changes based on your location", pointing to the following image:

Unless you are using a VPN, the image above should pin where you are. He also linked the source code and I decided to adapt it to Next.js. Let me detail what I did:

1. Use a Middleware
2. Install a few dependencies
3. Create an endpoint to return a SVG
4. Create a redirect