next.jsでsupabaseのデータをローカルのconsole logで確認する際にエラーが発生。
Next.js14で掲示板Webアプリケーションを作ってみよう (YouTube)
この方の動画をそのまま同じように作成しております。
エラー内容
import BBSCardList from "./components/BBSCardList";
pageディレクトリ内にpage.tsxがなくappディレクトリにpage.tsxがあるため"./components/BBSCardList"の読み込みができないと表示されています。
next.jsは今回が初めてで調べるとpage.tsxはpageディレクトリ内にないとだめと書いてありましたが動画ではapp内にありそれで実行できておりました。
なにか別のところで間違っていると思い3回ほど1から作成をやり直しましたが同じところでエラーが発生しているので拡張機能かなにかが動画で紹介されていなくたりないのかなとおもっております。
コード:
page.tsx
import { NextResponse } from "next/server";
import prisma from "../../../lib/prismaClient";
export async function GET(req: Request){
const allBBSPosts = await prisma.post.findMany();
return NextResponse.json(allBBSPosts);
}
import BBSCardList from "./components/BBSCardList";
export default async function Home() {
const response = await fetch("http://localhost:3000/api/post",{
cache: "no-store",
});
const bbsAllData = await response.json();
console.log(bbsAllData);
return (
<main>
<BBSCardList />
</main>
);
}
import { NextResponse } from "next/server";
import prisma from "../../../lib/prismaClient";
export async function GET(req: Request){
const allBBSPosts = await prisma.post.findMany();
return NextResponse.json(allBBSPosts);
}
route.ts
import { NextResponse } from "next/server";
import prisma from "../../../lib/prismaClient";
export async function GET(req: Request){
const allBBSPosts = await prisma.post.findMany();
return NextResponse.json(allBBSPosts);
}
import { NextResponse } from "next/server";
import prisma from "../../../lib/prismaClient";
export async function GET(req: Request){
const allBBSPosts = await prisma.post.findMany();
return NextResponse.json(allBBSPosts);
}
import { NextResponse } from "next/server";
import prisma from "../../../lib/prismaClient";
export async function GET(req: Request){
const allBBSPosts = await prisma.post.findMany();
return NextResponse.json(allBBSPosts);
}