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

Source: Dev.to

Introduction

Working with data‑heavy APIs like the original SWAPI can be cumbersome. Displaying a single character card often requires a cascade of requests: fetch the person, then their homeworld, films, species, etc. This results in many round‑trips and a slow frontend experience.

Solution: All‑in‑One Endpoint

A Next.js BFF (Backend‑For‑Frontend) aggregates the necessary data in a single request.

curl "https://sw-next-api.vercel.app/api/v1/people/1?expand=homeworld,films"

Sample Response

{
  "name": "Luke Skywalker",
  "homeworld": {
    "name": "Tatooine",
    "population": 200000,
    "...": "..."
  },
  "films": [
    {
      "title": "A New Hope",
      "episode": 4
    },
    "... more films ..."
  ],
  "meta": {
    "isForceUser": true,
    "faction": "rebels"
  }
}

Key Features

Data Expansion

• Use the ?expand= query parameter to embed related resources (e.g., homeworld, films).
• Supports nested objects up to two levels deep to keep payloads manageable.

Search and Filters

• Pagination and sorting for list endpoints.
• Additional fields such as isJedi and faction (rebels/empire) enable filtering, e.g., ?isJedi=true&faction=republic.

Normalized Data

• Consistent field names and types simplify consumption in React, Vue, or other frontend frameworks.

Usage

This API is ideal for teaching and prototyping real‑world request patterns:

• Pagination for list views.
• Search for form inputs.
• Expansion for detail pages.

You can explore the API at: https://sw-next-api.vercel.app