IP Address Tracker - Next13, TypeScript, TailwindCSS & Leaflet React

Solution retrospective
Fun little challenge. Had a good time connecting to two API's together.
I'm quite happy with my utilization of server-side rendering of my fetch request.
One problem i had, was that i got an "window is not defined" error while building the project. A solution for this i rendering the Map component with next Dynamic, like it's done in this video: https://www.youtube.com/watch?v=wWEub83W8Jw
Please log in to post a comment
Log in with GitHubCommunity feedback
- @fazzaamiarso
Hi @frbarbre! Nice Solution!
I have a tip for you.
When constructing a URL, it's better to utilize URL constructor to prevent Character Encoding problem. Here's the refactored code
const baseUrl = "https://geo.ipify.org/api/v2/"; const searchIpURL = new URL("country,city", baseUrl); searchIpURL.searchParams.append("apiKey", process.env.API_KEY) searchIpURL.searchParams.append("ipAddress", params.IPaddress) const searchIpData = await fetch(searchIpURL);
I hope it's useful! Cheers!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord