Theo's Typesafe Cult•11mo 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•11mo ago

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

kaleembhattiOP•11mo ago

just give me 1m

grassfedavocado•11mo 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.

kaleembhattiOP•11mo 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•11mo ago

That would help too

kaleembhattiOP•11mo ago

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

grassfedavocado•11mo ago

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

kaleembhattiOP•11mo ago

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

GitHub

GitHub - kaleembhattiworks/fixingcambridgestudies

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

kaleembhattiOP•11mo ago

yes i had it on pages router (issue)

kaleembhattiOP•11mo ago

vercel error

kaleembhattiOP•11mo 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•11mo ago

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

kaleembhattiOP•11mo 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•11mo 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

kaleembhattiOP•11mo ago

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

grassfedavocado•11mo 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•11mo 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•11mo ago

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

kaleembhattiOP•11mo ago

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

grassfedavocado•11mo ago

Ahhhhh that makes sense.

kaleembhattiOP•11mo ago

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

grassfedavocado•11mo ago

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

Y7YA•11mo 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•11mo ago

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

grassfedavocado•11mo ago

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

kaleembhattiOP•11mo 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