1

I've been trying to understand what's the proper way to call an external API from a Next.js application, because I'm used to developing MERN stack apps, I usually use axios for my API calls and use that inside a useEffect. Trying to learn Next.js and with all the information to take in, I got confused, especially with server components and whatnot, I tried doing the following and it seems to work but the question is: is it really the proper way?

my-next-app>app>api>hello>route.ts

import axios from "axios";

export async function GET() {
  const response = await axios.get("http://localhost:5000");

  return Response.json(response.data);
}

my-next-app>hello>page.tsx

"use client";

import axios from "axios";
import * as React from "react";

export default function page() {
  const [msg, setMsg] = React.useState("");

  React.useEffect(() => {
    axios.get("api/hello").then((res) => {
      // { msg: "Hello World!" }
      setMsg(res.data.msg);
    });
  }, []);

  return <div>{msg}</div>;
}
Improve this question
3
  • What about that do you would feel be improper? What problems do you think that code may have? We try not to have opinion based answers on this site, so if you have specific concerns about this code, please post those so they can be addressed. I can only guess about what you might think the problem is, and I'd probably be wrong.
    – Alex Wayne
    Commented Mar 14 at 22:56
  • I think what I feel that's improper about it is writing two layers of API calls that do the same thing I guess, and with Next.js server components and server actions being a big part of the framework, I feel that by not using them I should just stick with plain react?
    – Alae Herrak
    Commented Mar 14 at 23:21
  • It makes plenty of sense to keep your third party services calls behind a primary external API. This means you can do cross origin requests in your server layer (which you could not do from your browser layer)
    – Patrick Michaelsen
    Commented Mar 14 at 23:26

1 Answer 1

Reset to default
1

In this example, you could make the client call that API directly. It requires no secret tokens, and data isn't combined with other server side data. So there server really isn't doing anything by being in the middle here.

But let's say you have to authenticate against this API with a secret token that only your server knows.

Now your server route looks more like:

const secret = 'abcd1234'

export async function GET() {
  const response = await axios.get(`http://externalhost.com?secret=${secret}`);
  return Response.json(response.data);
}

And now say you want to remove all items from this response that your user might not be allowed to access. So you have to do some filtering:

const secret = 'abcd1234'

export async function GET() {
  const response = await axios.get(`http://externalhost.com?secret=${secret}`);
  const data = response.data.filter(item => !item.hasSensitiveData)
  return Response.json(data);
}

Now this is more complicated, and there at least 2 kinds of data that would compromise your security if there were exposed to your users.

The point is, in most real applications the server has to own that external interface because either the server has data the client does not, it would be grossly insecure to let the client do it.

So yeah, seems fine.

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.