Next.js Discord

Discord Forum

How to diagnose slow nextjs page and speed up initial and subsequent load times

Answered
Philippine Crocodile posted this in #help-forum
Open in Discord
Avatar
Philippine CrocodileOP
linking to discussion due to word limit
https://stackoverflow.com/questions/79111179/how-to-diagnose-slow-nextjs-page-and-speed-up-initial-and-subsequent-load-times
Answered by joulev
Dev mode is expectedly slow. It compiles and builds routes on demand. Ok 1.5 min is still too low but it’s not unheard of, I’ve seen worse. Dev mode is that slow.

If you run in prod mode (npm run build, then npm start), it will be significantly faster. You should deploy prod mode to your users.
View full answer

9 Replies

Avatar
joulev
Dev mode or prod mode? That’s abnormally long for prod mode.
Avatar
Philippine CrocodileOP
@joulev it is dev mode
bun run dev
"dev": "next dev --turbo",
Avatar
joulev
Dev mode is expectedly slow. It compiles and builds routes on demand. Ok 1.5 min is still too low but it’s not unheard of, I’ve seen worse. Dev mode is that slow.

If you run in prod mode (npm run build, then npm start), it will be significantly faster. You should deploy prod mode to your users.
Answer
Avatar
Philippine CrocodileOP
next build
  ▲ Next.js 14.2.3
  - Environments: .env.local

   Creating an optimized production build ...
Failed to compile.

../../node_modules/@trpc/react-query/dist/shared/hooks/createHooksInternal.mjs
Attempted import error: 'usePrefetchQuery' is not exported from '@tanstack/react-query' (imported as 'usePrefetchQuery').

Import trace for requested module:
../../node_modules/@trpc/react-query/dist/shared/hooks/createHooksInternal.mjs
../../node_modules/@trpc/react-query/dist/createTRPCReact.mjs
../../node_modules/@trpc/react-query/dist/index.mjs
./src/lib/trpc/react.tsx

../../node_modules/@trpc/react-query/dist/shared/hooks/createHooksInternal.mjs
Attempted import error: 'usePrefetchInfiniteQuery' is not exported from '@tanstack/react-query' (imported as 'usePrefetchInfiniteQuery').

Import trace for requested module:
../../node_modules/@trpc/react-query/dist/shared/hooks/createHooksInternal.mjs
../../node_modules/@trpc/react-query/dist/createTRPCReact.mjs
../../node_modules/@trpc/react-query/dist/index.mjs
./src/lib/trpc/react.tsx


> Build failed because of webpack errors
error: script "build" exited with code 1

@joulev 
//package.json
 "@tanstack/react-query": "^5.39.0",

i dont want to upgrade the package because it can break the app
will investigate
Avatar
joulev
Well this error means your app has a bug and you must fix it before you can deploy it
Avatar
Philippine CrocodileOP
@joulev
it is this file
https://gist.github.com/ridhwaans/b232f5ef5334b1beda17e0782d48d503
honestly it is boilerplate code, im pretty sure it compiled in the beginning
Avatar
joulev
The error tells you what’s wrong. You import hooks from the library but that package doesn’t export those hooks there. This bug is on you you have to fix, I can’t fix it for you, I don’t use this library
Avatar
Philippine CrocodileOP
it was a non-issue. ran clean and rebuild
Avatar
Philippine CrocodileOP
I need help with static site generation on dynamic routes, because that is what is recommended on the nextjs docs
Error: headers called outside of request context https://nextjs.org/docs/messages/next-dynamic-api-wrong-context

after debugging next build --debug I found why it is failing

Static generation failed due to dynamic usage on /subpage, reason: headers

There is external data involved, I think I need to do getStaticPaths or convert some of my server component trpc requests to fetch requests, havent dont it before