サンプル

このような画面をサーバからデータを取得・表示します。

フロント側

コードを見て、いくつか注意すべきポイントがあります。
特に、商品リストを表示する部分で mapメソッドの返り値が Cardコンポーネントに渡す必要があります。

1. 商品リストの表示部分の修正

inventoryProducts.mapの中で、Cardコンポーネントを返却します。
mapは要素を返す必要があるので、返り値に return を追加する必要があります。

結論:

mapメソッド内で Cardコンポーネントを返すようにしました (return を追加)。
inventoryProductsが null の場合を考慮して、条件分岐を追加しました。
もし inventoryProductsが空でない場合、商品を表示し、空の場合には「商品が見つかりませんでした」と表示します。

全体のコードは下記となります。

app/product/productList/page.tsx

'use client'//付けること
import ProductNavBar from "@/app/components/productHeaders/navbar/page"
import Card from "@/app/components/card/page"
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

export default function ListOfProducts(){
    const router = useRouter();
    const [inventoryProducts,setInventoryProducts] = useState<any>(null);

    useEffect(()=>{
        const fetchEvent = async()=>{
            try{
                const productslist = await fetch('/api/products/readAllProducts',{
                    method:'GET'
                });

                const data = await productslist.json();
                console.log("productリストは、",data);
                setInventoryProducts(data);
                //console.log("商品の在庫は、",data);
                
                if(Array.isArray(data) && data.length > 0){
                    //商品リストがあれば登録する
                    setInventoryProducts(data);
                    console.log("setInventoryProductsのデータは、",setInventoryProducts(data));
                }else{
                    setInventoryProducts([]);
                }
                
            }catch(error){
                alert('商品リストの取得に失敗しました。');
            }
        };
        fetchEvent();
    },[]);

    console.log("在庫のJSONデータの全部のinventoryProductsは、",inventoryProducts);

    return (
        <div className="shadow-md border border-gray-500 rounded-md">
            <ProductNavBar></ProductNavBar>
            <main className="flex items-center justify-center w-full ml-4 mt-4 mb-4 mr-4">
                
                <div className="cardArea grid grid-cols-3 gap-4">
                    {inventoryProducts && inventoryProducts.length > 0 ? (
                        inventoryProducts.map((product)=>{
                            return <Card product={product} key={product.productId}></Card>
                        })
                    ):(
                        <p>商品が見つかりませんでした。</p>
                    )}
                </div>
                
            </main>
        </div>
    )
}

Cardコンポーネントの作成

app/components/card/page.tsx

'use client'//Next.jsはデフォルトはサーバ側の設定である
import { useRouter } from "next/navigation";

export default function Card({product}){
    //ルーティング設定
    const router = useRouter();

    //詳細を見るボタンクリックしたときの処理
    const clickProductDetail = ()=>{
        router.push('');
    }

    const {productId,productName,description,productImagepath,price,quantity} = product;
    return (
        <div>
            <div>
                <div>
                    <input type="hidden" name="productId" value={productId}/>
                </div>
            </div>
            <div>
                <figure>
                    <img src={productImagepath} alt="No Imagae"/>
                </figure>
                <div className="card-body">
                    <h2 className="card-title">{productName}</h2>
                    <p>{description}</p>
                    <p>{price}円(yen)</p>
                    <p>{quantity}</p>
                    <div>
                        <button
                            type="button" 
                            className="bg-blue-500 shadow-md text-white font-bold px-4 py-4 rounded-md"
                            onClick={clickProductDetail}
                            >
                            詳細を見る
                        </button>
                    </div>
                </div>
            </div>
        </div>
    )
}

サーバ側

フロント画面へは、JSON形式で返却するようにしました。

app/api/products/readAllProducts/route.ts

import { NextResponse } from "next/server";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export async function GET(){
    try{
        //商品をすべて取得する
        const allProductsList = await prisma.product.findMany({
            /*
            include:{
                items:true // Itemテーブルのデータを含めて取得
            }
            */
        });
        console.log("すべての商品：",allProductsList);
        //HTTP Status:500(データベース接続エラー)
        if(!allProductsList){
            return NextResponse.json({message:'商品が1つも登録されていません。',status:500});
        }
        return NextResponse.json(allProductsList);
    }catch(error){
        //HTTP Status503(サーバ停止またはメンテナンス中)
        return NextResponse.json({message:'データベース停止またはメンテナンス中です。',status:503});
    }
    
}

スキーマ構造

スキーマも載せておきます。

schema.prisma

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User{
  userId Int @id @default(autoincrement())
  userName String
  email String @unique
  password String
  createdAt DateTime @default(now())

  orders   Order[]  // 1人のユーザーは複数の注文を持つ
}

model AdminUser{
  adminUserId Int @id @default(autoincrement())
  adminUserName String
  adminEmail String @unique
  adminPassword String
  createdAt DateTime @default(now())

  products      Product[] // 1人の管理者は複数の商品を管理できる
}

model Product{
  productId Int @id @default(autoincrement())
  productName String
  quantity Int  @default(0) //売価
  price Int     @default(0) //仕入れ数量
  description String
  productImagepath String
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now())

  items   Item[]   // 1つの製品は複数のアイテムに関連付けられる
  adminUserId  Int      // 管理者が商品を管理
  adminUser      AdminUser  @relation(fields: [adminUserId], references: [adminUserId]) // 管理者とのリレーション
}

model Item{
  itemId Int @id @default(autoincrement())
  quantity Int
  price Int
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now())

  productId Int      // Product と 多対1 のリレーション
  product   Product  @relation(fields: [productId], references: [productId])

  orderId   Int      // Order と 1対多 のリレーション
  order     Order    @relation(fields: [orderId], references: [orderId])
}

model Order{
  orderId Int @id @default(autoincrement())
  total Int
  createdAt DateTime @default(now())
  updatedAt DateTime @default(now())

  userId    Int      // User と 1対多 のリレーション
  user      User     @relation(fields: [userId], references: [userId])
  items     Item[]   // 1つの注文には複数のアイテムが関連付けられる
}

以上です。