I am developing next js application and in development enviroment it takes lot of time to load, The page goes unresponsive in the start and then if I cancel the request it stop loading, after refreshing it loads immediately. I am using material ui and few other smaller packages, my apis are not slow and neither i am using big libraries or packages.

I am trying to create next js application but response time is very slow

I am developing next js application and in development enviroment it takes lot of time to load, The page goes unresponsive in the start and then if I cancel the request it stop loading, after refreshing it loads immediately. I am using material ui and few other smaller packages, my apis are not slow and neither i am using big libraries or packages.

I am trying to create next js application but response time is very slow

• javascript
• reactjs
• next.js
• material-ui
• response-time

• Please provide more info. Are you fetching something server side (it will slow down the initial load). Are you using it in docker? Write logs to check how many times the ponents render. The last check is to ment on parts of code and try refreshing it and find out if some part of the code slower it. – Buggies Commented Feb 25, 2023 at 19:19
• The first load in DEV mode can be quite slow, because a lot of DEV overhead is loaded. If the re-loads and hot-reloads are fast enough, and a production build is fast enough (next build, next start), I wouldn't be concerned. But I agree, that is weird, e.g. I start the server with next dev, it takes forever, but if I press F5, even before the first page load is finished, the page loads quick. Also MUI can bee quite large. – kca Commented Feb 26, 2023 at 22:20
• 2 There is a lot of people on same situation, here is the main discussion on github about that. github./vercel/next.js/issues/48748 – ZecKa Commented Dec 12, 2023 at 6:11

3 Answers 3

Turbopack can be used in Next.js in both the pages and app directories for faster local development. To enable Turbopack, use the --turbo flag when running the Next.js development server.

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

It will make your dev mode a lot faster

For more info https://turbo.build/pack/docs/features https://nextjs/docs/architecture/turbopack

Use turbo, open your JSON file, and add this:

"dev": "next dev --turbo"

It will be there you only need to add --turbo

Delete the .next folder and restart the server with npm run dev. This should resolve the startup issue. Hope this helps.