WEBAPIを作成する(Nextjs+TypeScript)

作成します。まずは静的にリストをJSONで返すWEBAPIを作成する。
提供するFQDNとパスは http://localhost:3000/api/users

/app/api/users/route.ts

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json([
    {message: "データを取得1"},
    {message: "データを取得2"},
    {message: "データを取得3"},
  ]);
}

公式のチュートリアルを参考にAPIをfetchして画面表示する。
https://nextjs.org/docs/app/getting-started/fetching-data

/app/page.tsx

import Image from "next/image";
import { ReactElement, JSXElementConstructor, ReactNode, ReactPortal } from "react";

export default async function Home() {
  const data = await fetch('http://localhost:3000/api/users')
  const posts = await data.json()

  return (
    <div>
    <h1>テストです！</h1>
    <ul>
      {posts.map((post: { message: string }) => (
        <li>{post.message} !!!</li>
      ))}
    </ul>
    </div>
  );
}

想定通りAPIをfetchして取得した3つの要素を取得して画面に表示できました。

次はURLのパスパラメータ取得と登録系の機能を作成します。