Why use Next.js API route with an external API?

Question

I am new in Next.js. I want to know what is the use of export default function handler because we can directly call the API using fetch.

In my HTML code I put below code. When I click on submit button sendformData() function will be called.

<input type="button" value="Submit" onClick={() => this.sendformData()} ></input>

sendformData = async () => {
    const res = await fetch("/api/comments/getTwitFrmUrl?twitUrl=" + this.state.twitUrl, {
      headers: {
        "Content-Type": "application/json",
      },
      method: "GET",
    });

    const result = await res.json();
    this.setState({ data: result.data });
  };

When sendformData function is called, it calls /api/comments/ file and calls the function.

Here is the /api/comments/[id].js file code.

export default async function handler(req, res) {
  if (req.query.id == 'getTwitFrmUrl') {
    const resData = await fetch(
      "https://dev.. .com/api/getTwitFrmUrl?twitId=" + req.query.twitUrl
    ).then((response) => response.text()).then(result => JSON.parse(result).data);

    res.status(200).json({ data: resData });
  }
  else if (req.query.id == 'getformdata') {
    console.log('getformdata api');
    res.status(200).json({ user: 'getuserData' });
  }
}

When I put the below code in the sendformData same response will be retrieved. So why we need to call export default function handler function?

 sendformData = async () => {
    const res = await fetch(
          "https://dev.. .com/api/getTwitFrmUrl?twitId=" + req.query.twitUrl
        ).then((response) => response.text()).then(result => JSON.parse(result).data);

    const result = await res.json();
    this.setState({ data: result.data });
  };

Answer 1

If you already have an existing API there's no need to proxy requests to that API through an API route. It's completely fine to make a direct call to it.

However, there are some use cases for wanting to do so.

Security concerns

For security reasons, you may want to use API routes to hide an external API URL, or avoid exposing environment variables needed for a request from the browser.

• Masking the URL of an external service (e.g. /api/secret instead of https://company.com/secret-url)
• Using Environment Variables on the server to securely access external services.

— Next.js, API Routes, Use Cases

Avoid CORS restrictions

You may also want to proxy requests through API routes to circumvent CORS. By making the requests to the external API from the server CORS restrictions will not be applied.