What is the fetch API in Next.js App Router?

In the Next.js App Router, you can use the fetch API to make HTTP requests to external APIs or your own API routes. The fetch function is available globally in both server and client components.

• Example of using fetch in a server component:

// app/api/data/route.js
export async function GET() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json" },
  });
}

• Example of using fetch in a client component:

// app/page.js
import { useEffect, useState } from "react";

export default function HomePage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch("/api/data");
      const result = await response.json();
      setData(result);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}