CodeX
Published in

CodeX

Using NextJS API Routes as a BFF

How NextJS API Routes can work as an out-of-the-box BFF

Photo by Ales Nesetril on Unsplash

What is NextJS

NextJS is an incredibly popular React web framework that allows for out-of-the-box server-side rendering and static site generation, alongside a suite of opinionated settings and tools such as “routing” and “dynamic imports”. One of these features is “API routes, which automatically exposes the files under the API folder as endpoints. The documentation describes this feature as follows:

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page. They are server-side only bundles and won't increase your client-side bundle size.

What is the BFF architectural design pattern

The BFF, or “Backend-For-Frontend” architecture pattern involves creating a specified backend service with an interface or set of contracts specified to a specific frontend service. Microsoft has a great description of this pattern as part of their “Cloud Architecture” series.

There are many styles and variations to this, some of which are outlined by Sam Newman in his article talking about the pattern. For the purpose of this implementation, we will be referring to a sole BFF that exposes an interface for the NextJS frontend.

An example graph of service interactions with the BFF pattern using NextJS

Leveraging API Routes to create a BFF

As mentioned earlier, NextJS by default has an opinionated way of creating API routes alongside the front-end code. Below is an example of how NextJS structures its frontend and API routes.

An example of API routes living alongside frontend routes

In this example, the API routes would be mapped as such:

  • https://{some-host:api-port}.com/users/{id}

And the frontend routes are like this:

With this, we’re able to use some form of HTTP client like Fetch or Axios to make requests to the BFF, where we will have endpoints that perform things such as:

  • Data Transformation: The BFF can call some services and perform transformations on the response data to make it fit for the frontend.
  • Integrating Multiple Services: The BFF is able to orchestrate many different services together, even if they live within different service boundaries. It can be used to integrate with public APIs such as Stripe or MailChimp and interweave those APIs with possible in-house services.
  • Caching: To prevent overcalling services, intermediary caches can be set up exclusively for the BFF and have their settings tailored to the needs of the frontend.
  • Uniform Error Handling: As the BFF is the sole interface for the frontend to use, we can provide a single uniform way of handling and forming error codes that the frontend will consume, allowing us to manipulate or enrich existing errors that services may return into something the frontend can easily parse.
  • Authentication: The BFF can endpoints for provisioning and controlling the life-cycle of JWT tokens, and furthermore use them to protect certain API routes and also proxy the tokens to further services, or just control the auth flow of the frontend.

Although these benefits can be achieved via the BFF pattern alone, NextJS allows for a convenient and efficient way of standing up a BFF in new or existing projects. Furthermore, it does provide additional benefits on top of the pattern as they work together synergistically.

Sharing code and types

The benefit of having shared code between the frontend and the BFF is that you’re able to reuse code and types across both systems. This means you’re able to have type safety and a stable contract between both services as the BFF is the sole interface that the frontend will interact with. This is quite handy when crafting requests and responses across both services that incorporate certain commonly used types.

Although this introduces tight coupling between services, due to the nature of this pattern it is actually beneficial for us.

Fewer deployments

Due to the fact that the services exist together within the same NextJS codebase, changes can be made across the entire stack in a vertical fashion and only require one deployment. This also reduces the amount of IaaC needed to maintain the project and should make implementing and maintaining CI/CD practices much more efficient.

Conclusion

The BFF pattern is powerful and flexible. It can be designed in several different variations, and provide a lean and focused interface for the frontend to develop against. NextJS is becoming an increasingly popular React web framework, and with its pre-packaged API routes, developers can easily create and maintain a powerful BFF service for their frontend.

--

--

--

Everything connected with Tech & Code. Follow to join our 900K+ monthly readers

Recommended from Medium

Traefik to the rescue

Infinitely nested radicals

React: Dynamically Add input fields 2020

Deploy a React App to GitHub Pages

5 Uncanny things to do with JavaScript that you never knew

First Week of JavaScript Class

Building a Cross-Platform Desktop Notification Application with Electron

Bundling Your Assets With Webpack

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dominic C

Dominic C

Fullstack Software Engineer

More from Medium

Node Version Managers and Why You Need One

An screenshot of the Node.js website showing download links

From Lawyer to Front-End Developer

GraphQL — how we improved our CMS platform, using a generic infrastructure!

How to set up CI/CD pipelines using React, GitHub Actions, and Heroku