#BFF with API routes

1 messages · Page 1 of 1 (latest)

acoustic kettle
#

Team, I'm trying to create bff and I'm struggling a bit

For example in app/proxy/route.ts I have

  const apiUrl = `${process.env.NEXT_PUBLIC_API_URL}/--- make it dynamic ---`;

  const res = await fetch(apiUrl);

  const data = await res.json();

  return NextResponse.json(data);
}```

So from components I want to fetch like `fetch("api/proxy/oauth/token")` and `fetch("api/proxy/person/123personid")`

So how generally I can achieve it without creating a route API for each path.

ℹ️  Using app router
next bayBOT
#

Hi @acoustic kettle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I apologize, but I don't have enough information in the provided knowledge sources to give you a complete answer about implementing a BFF (Backend for Frontend) pattern using API routes in Next.js with the App Router. The knowledge sources don't contain specific information about creating dynamic API routes that can handle multiple paths as you've described.

However, I can provide some general information about dynamic API routes in Next.js based on the available knowledge:

  1. In the App Router, API routes are called Route Handlers. They are defined in a route.js file within the app directory API Reference (https://nextjs.org/docs/app/api-reference/file-conventions/route).

  2. The App Router supports dynamic routes, which can be created using square brackets **] for dynamic segments and [...folder] for catch-all segments [App Routing Conventions** (https://nextjs.org/docs/getting-started/project-structure#app-routing-conventions).

  3. You might be able to use a catch-all route to handle multiple paths. In the App Router, this would be defined as **...slug] [App Routing Conventions** (https://nextjs.org/docs/getting-started/project-structure#app-routing-conventions).

To implement what you're trying to achieve, you might need to create a catch-all route handler that can parse the incoming request path and forward it to the appropriate API endpoint. However, the exact implementation details for this in the App Router are not provided in the given knowledge sources.

For more detailed information on implementing route handlers in the App Router, you may want to refer to the official Next.js documentation on Route Handlers, which is not included in the provided knowledge sources.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@acoustic kettle Kapa.ai is still learning and improving, please let me know how I did by reacting below.