Visualizzare dati da API in Next.js

In questo articolo vediamo dei possibili modi per visualizzare dati presi da API in Next.js.

Nello specifico useremo i classici useEffect e fetch.

Qui sotto un esempio di codice:

"use client";

import React, {useEffect, useState} from "react";

type Canzone = {
  canzone_titolo: string,
  canzone_autore: string
}

export default function Home() {
  const [data, setData] = useState<Canzone[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    setLoading(true);
    const url = "https://www.matteoferrone.it/api/canzoni/get.php";

    fetch(url)
        .then(async (res) => {
          const items: Canzone[] = await res.json();
          setData(items.data);
        })
        .catch((e) => {
          if (e instanceof Error) {
            setError(e.message);
          }
        })
        .finally(() => {
          setLoading(false);
        });
  }, []);

  const loadingComponent = <div>Loading...</div>;
  const errorComponent = <div>Errore: {error}</div>;

  return (
      <main>
        <div>
          {loading ? (
              loadingComponent
          ) : error ? (
              errorComponent
          ) : (
              <div>
                <ul>
                  {data.map(d => (<li key={d.canzone_titolo}>{d.canzone_titolo}</li>))}
                </ul>
              </div>
          )}
        </div>
      </main>
  );
}

Enjoy!