feat: appdir option (smaller version)

[juliusmarminge]

smaller, less opinionated version of #1446

This alternative does not include:

• Server Actions
• ShadCN-ish tailwind config
• Custom UI Button component with twMerge

[CombeeMike]

Is this supposed to build ATM?

It doesn't for me. npm run build right after bootstrapping (+ adding some env data), gives me the following:

Generating static pages (0/4)  [=   ] << query  #1 post.hello  {
  input: { text: 'from tRPC' },
  result: s [TRPCClientError]: Dynamic server usage: Page couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
      at s.from (/home/mike/dev/test-app/.next/server/chunks/102.js:1:21541)
      at /home/mike/dev/test-app/.next/server/chunks/102.js:1:25381 {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: n [Error]: Dynamic server usage: Page couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
        at i (/home/mike/dev/test-app/.next/server/chunks/175.js:1:3588)
        at d (/home/mike/dev/test-app/.next/server/chunks/175.js:1:1083)
        at Object.headers (/home/mike/dev/test-app/.next/server/app/page.js:1:3490)
        at Object.headers (/home/mike/dev/test-app/.next/server/chunks/102.js:5:4719)
        at g (/home/mike/dev/test-app/.next/server/chunks/102.js:1:22751)
        at k (/home/mike/dev/test-app/.next/server/chunks/102.js:5:3963)
        at Object.fetch (/home/mike/dev/test-app/.next/server/chunks/102.js:5:4613)
        at Timeout.o (/home/mike/dev/test-app/.next/server/chunks/102.js:1:24229)
        at listOnTimeout (node:internal/timers:569:17)
        at process.processTimers (node:internal/timers:512:7) {
      digest: 'DYNAMIC_SERVER_USAGE'
    }
  },
  elapsedMs: 5
}
 << query  #2 post.hello  {
  input: { text: 'from tRPC' },
  result: s [TRPCClientError]: Dynamic server usage: Page couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
      at s.from (/home/mike/dev/test-app/.next/server/chunks/102.js:1:21541)
      at /home/mike/dev/test-app/.next/server/chunks/102.js:1:25381 {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: n [Error]: Dynamic server usage: Page couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
        at i (/home/mike/dev/test-app/.next/server/chunks/175.js:1:3588)
        at d (/home/mike/dev/test-app/.next/server/chunks/175.js:1:1083)
        at Object.headers (/home/mike/dev/test-app/.next/server/app/page.js:1:3490)
        at Object.headers (/home/mike/dev/test-app/.next/server/chunks/102.js:5:4719)
        at g (/home/mike/dev/test-app/.next/server/chunks/102.js:1:22751)
        at k (/home/mike/dev/test-app/.next/server/chunks/102.js:5:3963)
        at Object.fetch (/home/mike/dev/test-app/.next/server/chunks/102.js:5:4613)
        at Timeout.o (/home/mike/dev/test-app/.next/server/chunks/102.js:1:24229)
        at listOnTimeout (node:internal/timers:569:17)
        at process.processTimers (node:internal/timers:512:7) {
      digest: 'DYNAMIC_SERVER_USAGE'
    }
  },
  elapsedMs: 1
}

Am I doing something wrong here or is this simply not ready to build yet?

[juliusmarminge]

CI builds - last time I tried it built

[CombeeMike]

Just tried in 3 different envs:

• Ubuntu 22.04.2 LTS in WSL2, npm v9.5.1, Node v18.16.1
• "Real" Ubuntu 22.04.3 LTS, npm v9.6.4, Node v18.17.1
• Windows 10 cmd line, npm v8.1.4, Node v16.17.0

Following steps:

• npm create [email protected] with options:
  TS: yes, TW: yes, tRPC: yes, NextAuth, Drizzle, App dir: yes, Git init: no, npm i: yes, Alias: default ~/
• Write some dummy values into properties DATABASE_URL & NEXTAUTH_SECRET in .env
• npm run build

All 3 resulted in the same error mentioned above 🤷‍♂️

[LZL0]

I would love to see this working. Please let me know how I could assist.

Next.js documentation: https://nextjs.org/docs/messages/app-static-to-dynamic-error
From first glance it seems to be having issues with the headers() function invocation in cli/template/extras/src/app/layout/with-trpc.tsx and cli/template/extras/src/app/layout/with-trpc-tw.tsx.

[CombeeMike]

Seems to be the line const heads = new Map(headers()); in trpc/server.ts. I added some logs and the one before this invocation to headers() shows up in my build log right before the error messages:

trpc/server.ts

    // ...
    unstable_httpBatchStreamLink({
      url: getUrl(),
      headers() {
        console.log('creating headers...'); // <- Shows in log right before error
        const heads = new Map(headers());
        heads.set("x-trpc-source", "rsc");
        console.log('headers created'); // <- Not showing in logs. Guess `headers()` invocation above throws
        return Object.fromEntries(heads);
      },
    }),
    // ...

layout.tsx

// ...
<body className={`${robotoMono.variable} ${roboto.variable} font-sans`}>
  <AppProviders
    headers={(() => {
      console.log('creating headers in layout...'); // <- Not showing in log, maybe we're not getting this far?
      return headers();
    })()}
  >
  // ...
</body>
// ...

Build log output

...
Generating static pages (1/4)  [==  ] 
creating headers...
<< query  #1 post.hello  {
  input: { text: 'from tRPC' },
  result: s [TRPCClientError]: Dynamic server usage: Page couldn't be rendered statically because it used `headers`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
...

Whilst this seems rather clear, I don't know how to work around this as I don't have enough knowledge about what this unstable_httpBatchStreamLink is actually doing and whether we could get the actual header data from somewhere else, maybe create it in some closure before the async context etc. 🤷‍♂️

[juliusmarminge]

Whilst this seems rather clear, I don't know how to work around this as I don't have enough knowledge about what this unstable_httpBatchStreamLink is actually doing and whether we could get the actual header data from somewhere else, maybe create it in some closure before the async context etc.

Hmm, I'll try to have a look at this in the coming days, but we're using this setup at work and it's fine. Afaik, this is the only way to read the incoming request headers for client components during ssr :/

Maybe we need an export const dynamic = "force-dynamic in there. If you want part of the app stratically rendered, you could leverage route groups and only mount the TRPCReactProvider where your app is actually leveraging react-query?

[CombeeMike]

export const dynamic = 'force-dynamic'; in my main page.tsx seems to be doing its job 🎉
At least it builds now and I get the correct page after npm run start.

I'm not sure about the actual downsides and whether or not this should be in the default page.tsx created from the template as I'm rather new to the whole app router but from quickly going over the docs, it seems to be the right thing at least for my current use case anyways (only 1 page which shows data from the DB, no static pages at all, ...).

Thanks for the support 🙏, I hope it's ok that I "hijacked" this PR in the way I did 🙈

[LZL0]

I believe by adding force-dynamic we are forcing SSR (server-side rendering).

[zihaolam]

Used pnpm create [email protected], did not make any code changes and ran dev server and met this issue with the server side trpc call.

[c-ehrlich]

Used pnpm create [email protected], did not make any code changes and ran dev server and met this issue with the server side trpc call.

thanks for the report. this was due to using a non-3000 port. just pushed a change to make it work on any port.

be aware though that next-auth will still require a specific port for most providers including the default discord one

[zihaolam]

Used pnpm create [email protected], did not make any code changes and ran dev server and met this issue with the server side trpc call.

thanks for the report. this was due to using a non-3000 port. just pushed a change to make it work on any port.

be aware though that next-auth will still require a specific port for most providers including the default discord one

Thanks for the prompt reply & fix! How do i incorporate the latest changes to the current project? do i need to bootstrap a new one?

[c-ehrlich]

easiest is probably just looking at the diff from the last commits

[benfavre]

Switching from node 18 to 20 fixes this for me