

データベースとの連携の勉強でtodoアプリを作り、Vercelでのデプロイ時にエラーがでて躓いてしまったのでなにかご教授いただけると嬉しいです。  
Next13, prisma, postgreSQL, railway, tailwind で作りました。

レポジトリはこちらです。  
<https://github.com/satoshi02198/Task-maker>

ローカル環境は問題なく動いてるのですが、ビルド時に問題が起こります。  
VSCODE内でビルドしてnpm run start をしてもなにも表示されません。

ビルド時のターミナルに下記のように表示されてます。

[code]

        Route (app)                                Size     First Load JS
    ─ ○ /                                      0 B                
    0 B
    + First Load JS shared by all              82.7 kB
      ├ chunks/17-3a98e3b60f783ce7.js          80.4 kB
      ├ chunks/main-app-f402105a83060ed9.js    217 B
      └ chunks/webpack-77b60a894b26ff59.js     2.04 kB
    
    Route (pages)                              Size     First Load JS
    ┌ ○ /404                                   179 B          81.2 kB
    ├ λ /api/createPosts                       0 B              81 kB
    ├ λ /api/deletePosts                       0 B              81 kB
    ├ λ /api/getPosts                          0 B              81 kB
    └ λ /api/updatePosts                       0 B              81 kB
    + First Load JS shared by all              81 kB
      ├ chunks/main-af00b613ec71d002.js        78.7 kB
      ├ chunks/pages/_app-5841ab2cb3aa228d.js  192 B
      └ chunks/webpack-77b60a894b26ff59.js     2.04 kB
    
    λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
    ○  (Static)  automatically rendered as static HTML (uses no initial props)
    
[/code]

**vercelでのエラーコード**

[code]

    SyntaxError: Unexpected token T in JSON at position 0
        at JSON.parse (<anonymous>)
        at Response.json (node:internal/deps/undici/undici:6160:23)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async Home (/vercel/path0/.next/server/app/page.js:478:18)
    Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
    SyntaxError: Unexpected token T in JSON at position 0
        at JSON.parse (<anonymous>)
        at Response.json (node:internal/deps/undici/undici:6160:23)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async Home (/vercel/path0/.next/server/app/page.js:478:18)
    info  - Generating static pages (3/3)
    > Build error occurred
    Error: Export encountered errors on following paths:
        /page: /
        at /vercel/path0/node_modules/next/dist/export/index.js:415:19
        at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
        at async /vercel/path0/node_modules/next/dist/build/index.js:1400:21
        at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
        at async /vercel/path0/node_modules/next/dist/build/index.js:1259:17
        at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
        at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:66:29)
    Error: Command "npm run build" exited with 1
    
[/code]

page.tsx
のコードはサーバーサイドでダメでしたので、クライアントに変えてUseEffectを使ってfetchするようにしてもvercelでのデプロイはできませんでした。

[code]

        // "use client";
    import PostForm from "../components/PostForm";
    import Tasks from "../components/Tasks";
    // import React, { useState, useEffect } from "react";
    
    async function getPosts() {
      const res = await fetch(`${process.env.BASE_URL}/api/getPosts`);
      if (!res.ok) {
        console.log(res);
      }
      return res.json();
    }
    
    export default async function Home() {
      // const [post, setPost] = useState([]);
    
      // useEffect(() => {
      //   const getPosts = async () => {
      //     try {
      //       const res = await fetch("/api/getPosts");
      //       if (res.ok) {
      //         const jsonRes = await res.json();
      //         console.log(jsonRes);
      //         setPost(jsonRes);
      //       }
      //     } catch (err) {
      //       console.log(err);
      //     }
      //   };
      //   getPosts();
      // }, []);
    
      const data: {
        id: number;
        title: string;
        content: string;
        timestamp: string;
      }[] = await getPosts();
    
      return (
        <div>
          <PostForm />
          <div className="sm:flex  sm:justify-center sm:items-baseline sm:flex-wrap max-w-7xl mx-auto mt-7">
            {data.reverse().map((post) => (
              <Tasks
                title={post.title}
                content={post.content}
                id={post.id}
                timestamp={post.timestamp}
              />
            ))}{" "}
          </div>
        </div>
      );
    }
    
[/code]


CC BY-SA 4.0
2023-02-09T07:18:38.357
93779
2023-02-09T14:04:34.320
2023-02-09T14:04:34.320
3060
55671
question
reactjs next.js
Vercelでのデプロイ時のエラー。SyntaxError: Unexpected token T in JSON at position 0