2 answers
★ Best answer
The thing that really makes all the difference is checking your bundle size with `next/image` and dynamic imports - a lot of people forget that Next.js loads everything by default at build time if you're not careful. The other answer mentions heavy dependencies, which is true, but you also need to look at your API calls on startup and your Google Fonts or other external resources that block rendering. Try `next/dynamic` for non-critical components, disable sourcemaps in production, and use `measureUserAgentSpecificMemory()` to track what's actually slowing things down - 90% of the time it's something silly like a library being loaded unnecessarily or a network request that's dragging on.
I had sites that were sluggish on startup, and it was usually linked to a few classic things. First, check if you're loading massive dependencies at startup - like UI libraries or utils that you could import dynamically with `next/dynamic`. Then look at your `_app.tsx` or `_app.js`: if you're doing a ton of stuff in there (global API calls, instantiating huge contexts), that slows everything down. Next.js config itself can also be the culprit - Webpack plugins hanging around, bad TypeScript config, or too many pre-generated routes if you're using static generation.
After that you can try a few concrete things. Run `next build` and check the report - it shows you the weight of your chunks. If some files are huge, do more code-splitting with lazy loading. Disable features you're not using (ISR if you're not using it, API routes if it's pointless for you). And a classic one: make sure your dev mode (`next dev`) isn't just... in dev mode - sometimes the problem comes from there and it's not representative of the final build.
If it's really on startup in production, also check your hosting - sometimes it's a cold start thing if you're on a serverless platform, or just resources that are too limited. But generally there's code hanging around somewhere.
Your answer
Log into answer.