Next.js Discord

Discord Forum

Extremely slow dev server for the first page

Answered
Whiteleg shrimp posted this in #help-forum
Open in Discord
Whiteleg shrimpOP
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 Whiteleg shrimp
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.
Whiteleg shrimpOP
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>
  )
}
Whiteleg shrimpOP
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
Whiteleg shrimpOP
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
Whiteleg shrimpOP