Next.js14 App Routerを使用しAPIで簡単なデータを取得＆表示する

Next.js14に、新しい機能としてApp Routerが導入されました。
App Routerを使用してAPIでデータを取得＆表示する方法で分かりやすくまとまったものがなかったので、今回、基本のやり方をまとめました。

APIでデータを取得し表示する流れ

APIへの接続…route.js
↓
データを加工し表示する…コンポーネント
↓
表示させたいページにコンポーネントをインポートし表示する…page.tsx

フォルダ構成
Next.js14ではフォルダ構成がルーティングといってURLの作成＆構成もかねているため、フォルダ構成が大事になってきます。

直接page.tsxに取得したAPIのデータを加工する関数を書いてもいいのですが、とても長く見にくいコードになってしまいます。また変更や削除も難しくなります。

それぞれ表示するパーツごとにコンポーネント化し、それをインポートして取り込むのがスマートです。

以下、今回のフォルダ構成です。

＜ポイント＞
・route.jsはapp/apiフォルダの配下に置く
・コンポーネントはapp/uiフォルダの配下におくと便利。uiという名称にしているが他の名称（例えばcompornents）でも分かりやすければOK。

簡単なAPI取得＆表示を作成していきます
これまで説明した流れにそって簡単なAPIの表示を行います。

デモ用としてこのサイトのAPIを利用しました。便利なので練習用におすすめです。
JSON Placeholder
https://jsonplaceholder.typicode.com/

1.route.jsを作成

route.js

export const GET = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  console.log(data);
  return data;
};

2.コンポーネントを作る

todo1.tsx

"use client";

import React, { useEffect, useState } from 'react';
import { GET } from '../app/api/articles/route.js';

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await GET();
      setData(result);
    };

    fetchData();
  }, []);

  return (
    <div>
      {data && JSON.stringify(data, null, 2)}
    </div>
  );
}

3.ページに表示させる
JSON形式がそのまま表示されるシンプルな仕組みです。
２で作成したPage関数を<Page />として挿入することでシンプルなコードで表示が可能です。

page.tsx

"use client";

import { Page } from '../ui/todo1.tsx';

export default function Home() {
  return (
    <div>
      <Page />
    </div>
  );
}