Theo's Typesafe Cult•5mo ago

Dynamic server error

i am new to react, nextjs and t3 stack in general i am trying to implement clerk with the t3 stack (app router, trpc, tailwind, prisma) but i am getting dynamic server error when pushing my code to vercel can someone please guide me

Solution:

i just did

export const dynamic = "force-dynamic"

export const dynamic = "force-dynamic"

and all errors from vercel are gone...

Jump to solution

27 Replies

grassfedavocado•5mo ago

Could you please post some screenshots of the error and of how your code is setup?

kaleembhatti•5mo ago

just give me 1m

grassfedavocado•5mo ago

You need to setup up your dynamic login and register routes on top of adding the middleware and ensuring your APIS keys are correct.

kaleembhatti•5mo ago

layout.tsx

import "@/styles/globals.css";

import { Inter } from "next/font/google";
import { Providers } from "./providers";

import { cookies } from "next/headers";

import { TRPCReactProvider } from "@/trpc/react";

import { ClerkProvider } from "@clerk/nextjs";
import { dark } from '@clerk/themes';

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider appearance={{
      baseTheme: dark,
    }}>
      <html lang="en" className="dark">
        <body className={`font-sans ${inter.variable} dark:bg-black-dark dark:text-white-light`}>
          <TRPCReactProvider cookies={cookies().toString()}>
            <Providers>
              {children}
            </Providers>
          </TRPCReactProvider>
        </body>
      </html>
    </ClerkProvider>

  );
}

import "@/styles/globals.css";

import { Inter } from "next/font/google";
import { Providers } from "./providers";

import { cookies } from "next/headers";

import { TRPCReactProvider } from "@/trpc/react";

import { ClerkProvider } from "@clerk/nextjs";
import { dark } from '@clerk/themes';

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata = {
  title: "Create T3 App",
  description: "Generated by create-t3-app",
  icons: [{ rel: "icon", url: "/favicon.ico" }],
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider appearance={{
      baseTheme: dark,
    }}>
      <html lang="en" className="dark">
        <body className={`font-sans ${inter.variable} dark:bg-black-dark dark:text-white-light`}>
          <TRPCReactProvider cookies={cookies().toString()}>
            <Providers>
              {children}
            </Providers>
          </TRPCReactProvider>
        </body>
      </html>
    </ClerkProvider>

  );
}

mmmmmmmmmmmm i am new with t3 wait let me give u the github its very small

grassfedavocado•5mo ago

That would help too

kaleembhatti•5mo ago

i tried app router before and couldnt figure out how to fix this

grassfedavocado•5mo ago

Is your time set correctly on your computer? There was a huge issue with that.

kaleembhatti•5mo ago

https://github.com/kaleembhattiworks/fixingcambridgestudies.git

GitHub

GitHub - kaleembhattiworks/fixingcambridgestudies

Contribute to kaleembhattiworks/fixingcambridgestudies development by creating an account on GitHub.

kaleembhatti•5mo ago

yes i had it on pages router (issue)

kaleembhatti•5mo ago

vercel error

kaleembhatti•5mo ago

i had the same issue but i ignored it and went on with my work but some time down the line i started having issues with clerk because of this (dynamic server error)

grassfedavocado•5mo ago

Try that Sounds like some people are getting the issue too.

kaleembhatti•5mo ago

yes i have searching for like 2 3 hours and many people have the same issue ill try this this would go inside layout.tsx ... i am a noob its been just 2 weeks and i only knew javascript. everything else is new

Solution

kaleembhatti•5mo ago

i just did

export const dynamic = "force-dynamic"

export const dynamic = "force-dynamic"

and all errors from vercel are gone i dont think that this is the most performant solution but it works

kaleembhatti•5mo ago

can u tell me how to implement this maybe this would be better

grassfedavocado•5mo ago

What exactly are you trying to do? Setup Auth using Clerk? You just need to follow the steps in this guide for next.js. It looks like you are using NextAuth so it seems to me you are trying to setup two different auth solutions at the same time.

grassfedavocado•5mo ago

https://clerk.com/docs/quickstarts/nextjs

Add authentication and user management to your Next.js app with Cle...

Learn how to use Clerk to quickly and easily add secure authentication and user management to your Next.js application. Clerk works seamlessly on both client side and server side components.

grassfedavocado•5mo ago

The TRPC you should be using for your API routes and server actions. What database are you using?

kaleembhatti•5mo ago

planetscale the issues comes because the trpc provider uses cookies and that isnt allowed

grassfedavocado•5mo ago

Ahhhhh that makes sense.

kaleembhatti•5mo ago

thanks for the help I hope something official pops up i almost quit twice because of this

grassfedavocado•5mo ago

Well don’t give up. That’s the true testament to a developer.

Y7YA•5mo ago

Why not learn the stack bit by bit? Jumping to the full T3 stack is likely going to be overwhelming coming from just javascript. Before prisma maybe use raw SQL. Before trpc, learn NextJS server actions & other server-client paradigms. Tailwind is easy so you no problem there.

Tribe•5mo ago

I just came here with the same issue and this here saved my ass thank you

grassfedavocado•5mo ago

I would agree, to learn more about of the lower level things before jumping to the abstracted layers built on top of everything.

kaleembhatti•5mo ago

that is true but idk i had stopped coding for half a year and saw this as a come back

Gaming

Programming

Dynamic server error