
Building a Frontend-Friendly Star Wars API with Next.js BFF
Hi! I've always struggled with data-heavy APIs like the original SWAPI. To display one character card, you end up with a waterfall of requests: fetch person, then homeworld, then films, species... https://swapi.dev/api/people/1/ # Luke https://swapi.dev/api/planets/1/ # Tatooine https://swapi.dev/api/films/1/ # A New Hope ... and more Lots of requests = slow frontend. My Solution: All in One: curl "https://sw-next-api.vercel.app/api/v1/people/1?expand=homeworld,films" Response (snippet): { "name": "Luke Skywalker", "homeworld": { "name": "Tatooine", "population": 200000, ... }, "films": [{ "title": "A New Hope", "episode": 4 }, ... ], "meta": { "isForceUser": true, "faction": "rebels" } } Key features: Data Expansion: ?expand=homeworld,films — nested objects (up to 2 levels, to avoid overload). Example: /api/v1/films/1?expand=characters.homeworld Search and Filters: Pagination, sorting. Try: /api/v1/people?search=skywalker&gender=male&sort=name&page=1&limit=5 Extra Info: isJedi, factio
Continue reading on Dev.to JavaScript
Opens in a new tab



