next.js、reactで表示されるエラーが解決できない。

Question

実現したいこと

spabaseのデータをprismaとnextjsを使ってjson形式で抽出したい。

発生している問題・分からないこと

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();

  return (
    <main>
      <BBSCardList />
    </main>
  );
}

上記のコードを実行するとエラーが出ます。

エラーメッセージ

Unhandled Runtime Error
Error: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

該当のソースコード

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();

  return (
    <main>
      <BBSCardList />
    </main>
  );
}

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

console.log(response);
をすると以下が表示されます
Response {
[Symbol(realm)]: null,
[Symbol(state)]: {
aborted: false,
rangeRequested: false,
timingAllowPassed: true,
requestIncludesCredentials: true,
type: 'default',
status: 404,
timingInfo: {
startTime: 8651.757667,
redirectStartTime: 0,
redirectEndTime: 0,
postRedirectStartTime: 8651.757667,
finalServiceWorkerStartTime: 0,
finalNetworkResponseStartTime: 0,
finalNetworkRequestStartTime: 0,
endTime: 0,
encodedBodySize: 0,
decodedBodySize: 0,
finalConnectionTimingInfo: null
},
cacheState: '',
statusText: 'Not Found',
headersList: HeadersList {
cookies: null,
[Symbol(headers map)]: [Map],
[Symbol(headers map sorted)]: null
},
urlList: [ URL {} ],
body: { stream: undefined, length: undefined, source: undefined }
},
[Symbol(headers)]: HeadersList {
cookies: null,
[Symbol(headers map)]: Map(9) {
'cache-control' => [Object],
'vary' => [Object],
'x-powered-by' => [Object],
'content-type' => [Object],
'content-encoding' => [Object],
'date' => [Object],
'connection' => [Object],
'keep-alive' => [Object],
'transfer-encoding' => [Object]
},
[Symbol(headers map sorted)]: null
}
}
✓ Compiled /favicon.ico in 45ms (297 modules)

const bbsAllData = await response.json();　の部分で、json形式で返ってきていないからエラーなのかな？と思ったりするのですが、原因が特定できません。画像を添付します。
どうぞよろしくお願いします。

補足

特になし

Comments

[naomina121]

status: 404,ということは該当するフォルダの名前かファイルの名前が間違っている可能性もあるかもしれません・・・。

Answer 1

もし (Pages Routerの) API Route または App Router の Route Handler を使っているなら、記憶は定かでないですが、Server Component でのデータ取得と組み合わせることが不可能だったはずです。

該当する API Router または Route Handler の中の取得処理を Home コンポーネントで直接実行するようにすれば、治るかもしれません。

Answer 2

console.log(response);
をすると以下が表示されます
･･･
status: 404,
･･･
statusText: 'Not Found',

とのことなので、推測するに

• APIサーバー側で、GET /api/post に対するルーティングが正しく設定されておらず404エラーになり、
• エラー発生時にはJSONが返されるようになっていない。(のでサーバーのデフォルトのエラー画面のHTMLが返されているためにJSONとしてパースすると失敗してエラーになっている）

という感じかなと思います。
サーバー側が完成しているのかどうか確認するには、

• ターミナルから curl コマンドを打ってみて確認したり、
• 開発用に使っているWEBブラウザにHTTPクライアントを入れて

GET http://localhost:3000/api/post
でどのようなレスポンスが返ってくるか確認します。（例：Chromeだったら Talend API Tester とか。）