DEV Community

aleksei
aleksei

Posted on • Edited on

Building a Frontend-Friendly Star Wars API with Next.js BFF

#webdev #typescript #swapi #starwars

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" }
}
Enter fullscreen mode Exit fullscreen mode

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, faction (rebels/empire). Filter Jedi: ?isJedi=true&faction=republic

Data normalized: convenient field names, types.

This API teaches working with real requests: pagination for lists, search for forms, expansion for detail pages. Perfect for React/Vue projects without complications.
Try it: https://sw-next-api.vercel.app

Top comments (0)