Open2

Create T3 App

hayato94087hayato94087

Create T3 App

はじめに

Create T3 Appとは以下

https://create.t3.gg/

インストール

yarn create t3-app sample --CI --trpc --prisma --nextAuth --tailwind
yarn create v1.22.19
warning package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-t3-app@7.7.0" with binaries:
      - create-t3-app
[#####################################################################################################################] 117/117
   ___ ___ ___   __ _____ ___   _____ ____    __   ___ ___
  / __| _ \ __| /  \_   _| __| |_   _|__ /   /  \ | _ \ _ \
 | (__|   / _| / /\ \| | | _|    | |  |_ \  / /\ \|  _/  _/
  \___|_|_\___|_/‾‾\_\_| |___|   |_| |___/ /_/‾‾\_\_| |_|



Using: yarn

✔ t3-app-sample scaffolded successfully!

Adding boilerplate...
✔ Successfully setup boilerplate for nextAuth
✔ Successfully setup boilerplate for prisma
✔ Successfully setup boilerplate for tailwind
✔ Successfully setup boilerplate for trpc
✔ Successfully setup boilerplate for envVariables

Installing dependencies...
✔ Successfully installed dependencies!

Initializing Git...
✔ Successfully initialized and staged git

Next steps:
  cd t3-app-sample
  yarn prisma db push
  yarn dev
✨  Done in 26.33s.
cd t3-app-sample
yarn prisma db push
yarn dev
hayato94087hayato94087

TRPCClientError:

import {
  createTRPCProxyClient,
  loggerLink,
  unstable_httpBatchStreamLink,
} from "@trpc/client";
import { cookies } from "next/headers";

import { type AppRouter } from "@/server/api/root";
import { getUrl, transformer } from "./shared";

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    loggerLink({
      enabled: (op) =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error),
    }),
    unstable_httpBatchStreamLink({
      url: getUrl(),
      headers() {
        return {
          cookie: cookies().toString(),
          "x-trpc-source": "rsc",
        };
      },
    }),
  ],
});

から以下のようなビルドエラーが出るが現状は無視する

  result: TRPCClientError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
      at TRPCClientError.from (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:1:24152)
      at /Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:1:29379
      at processTicksAndRejections (node:internal/process/task_queues:95:5)
      at runNextTicks (node:internal/process/task_queues:64:3)
      at listOnTimeout (node:internal/timers:537:9)
      at process.processTimers (node:internal/timers:511:7) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: DynamicServerError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
        at staticGenerationBailout (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/430.js:1:82908)
        at cookies (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/430.js:1:76951)
        at Object.headers (/Users/hayato94087/Private/t3-app-20231111/.next/server/app/page.js:1:3320)
        at Object.headers (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:5:4503)
        at fetchHTTPResponse (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:1:25777)
        at streamingJsonHttpRequester (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:5:3818)
        at Object.fetch (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:5:4372)
        at Timeout.dispatch (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:1:27988)
        at listOnTimeout (node:internal/timers:568:17)
        at process.processTimers (node:internal/timers:511:7) {
      digest: 'DYNAMIC_SERVER_USAGE'
    }
  },
  elapsedMs: 12
}
 << query  #2 post.hello  {
  input: { text: 'from tRPC' },
  result: TRPCClientError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
      at TRPCClientError.from (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:1:24152)
      at /Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:1:29379
      at processTicksAndRejections (node:internal/process/task_queues:95:5)
      at runNextTicks (node:internal/process/task_queues:64:3)
      at listOnTimeout (node:internal/timers:537:9)
      at process.processTimers (node:internal/timers:511:7) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: DynamicServerError: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
        at staticGenerationBailout (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/430.js:1:82908)
        at cookies (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/430.js:1:76951)
        at Object.headers (/Users/hayato94087/Private/t3-app-20231111/.next/server/app/page.js:1:3320)
        at Object.headers (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:5:4503)
        at fetchHTTPResponse (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:1:25777)
        at streamingJsonHttpRequester (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:5:3818)
        at Object.fetch (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:5:4372)
        at Timeout.dispatch (/Users/hayato94087/Private/t3-app-20231111/.next/server/chunks/428.js:1:27988)
        at listOnTimeout (node:internal/timers:568:17)
        at process.processTimers (node:internal/timers:511:7) {
      digest: 'DYNAMIC_SERVER_USAGE'
    }
  },
  elapsedMs: 4
}

エラーの理由は、以下だが解決方法がわからない。

https://nextjs.org/docs/messages/dynamic-server-error

ここでディスカッションされている

https://github.com/t3-oss/create-t3-app/issues/1599

よく見たらここで解決しそう

https://github.com/t3-oss/create-t3-app/pull/1654

しばらく待つ