Next.js Discord

Discord Forum

Extremely slow dev server for the first page

Answered
Bonga shad posted this in #help-forum
Open in Discord
Bonga shadOP
Hi, any idea why this is happening? I'm using Turbopack in a monorepo with pnpm and Turborepo. There are almost 20 compiled packages.

2 minutes for loading the only first page. For the next pages is more normal. Also I'm using the app dir
Answered by Bonga shad
From this

@source "../../apps/**/*.{ts,tsx}";
@source "../../packages/**/*.{ts,tsx}";


To this:

@source "../../apps/web/src/**/*.{ts,tsx}";
@source "../../packages/authentication/src/**/*.{ts,tsx}";
@source "../../packages/landing/src/**/*.{ts,tsx}";
@source "../../packages/profile/src/**/*.{ts,tsx}";
@source "../../packages/ui/src/**/*.{ts,tsx}";
View full answer

13 Replies

Asian black bear
The dev server does not use a file system based cache, therefore its initial startup takes a bit longer. On your first request it compiles all requested modules along the module graph for that particular route and as such it looks like you have tons of modules that you use starting from /home.
Bonga shadOP
Is there any way that I can optimized this? I already disabled the windows antivirus for this folder, but is anything else I can do?
export default function Test() {
  return (
    <div>
      <h1>Test</h1>
    </div>
  )
}
My root layout is also very simple
type RootLayoutProps = Readonly<{
  children: ReactNode
}>

export default function RootLayout(props: RootLayoutProps) {
  return (
    <html lang="es" suppressHydrationWarning>
      <body className={cn(geistSans.variable, geistMono.variable, "font-sans antialiased")}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <QueryClientProvider>
            <NuqsAdapter>{props.children}</NuqsAdapter>
          </QueryClientProvider>
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  )
}
Bonga shadOP
I actually found the issue, it is the tailwind package, without the tailwind import "./global.css", it runs much faster
Yeah I was mb (skill issue), not anything related to nextjs. I'm sorry 😦
Changing the tailwind import, it is now working normally
Bonga shadOP
From this

@source "../../apps/**/*.{ts,tsx}";
@source "../../packages/**/*.{ts,tsx}";


To this:

@source "../../apps/web/src/**/*.{ts,tsx}";
@source "../../packages/authentication/src/**/*.{ts,tsx}";
@source "../../packages/landing/src/**/*.{ts,tsx}";
@source "../../packages/profile/src/**/*.{ts,tsx}";
@source "../../packages/ui/src/**/*.{ts,tsx}";
Answer
Bonga shadOP