Next.js 13 devDependencies?

Question

I remember in Next.js 12, the dependencies and devDependencies are still following the rules from this answer. But now, when I type pnpm create next-app, all of the dependencies installed (no matter if they're only used for dev or both dev and prod) are all inside dependencies.

// Next 12

  "dependencies": {
    "next": "12.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.2",
    "typescript": "4.6.3"
  }

// Next 13

  "dependencies": {
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.2",
    "next": "13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.8.4"
  }

Is Next.js 13 do the minification itself for me? Should I separate them manually, defying create-next-app's recommendation? I can't find the answer in the documentation.

Looks like a bug, they should still follow the format from Next.js 12. — juliomalves, Nov 13 '22 at 00:45
I'm also curious about this. I recently had trouble deploying my NextJs app. It was complaining about missing @types/react and tailwind until I moved all deps from dev dependencies to dependencies. — AndyOh, Dec 03 '22 at 20:56
@AndyOh this can't be right. Tailwind is not needed during production. It uses a compiler that just spits out CSS after it's done compiling. This never happens in real time in prod. Only during the build in dev. — MaxT, Dec 17 '22 at 20:09
Seems like this is fine. Answer here https://github.com/vercel/next.js/issues/43066#issuecomment-1319969015 — Kelvin, Dec 27 '22 at 12:05
This should be marked as an anti-pattern in the Next.js docs. In general, I still prefer to separate my dependencies. — morganney, Aug 14 '23 at 16:52

score 21 · Accepted Answer · answered Feb 10 '23 at 23:18

As @kelvin has mentioned in a commentary, one of the members of Vercel has explicitly stated:

Hi, this is expected. Next.js is not relying on dependencies vs. devDependencies either if you host on platforms like Vercel or use output: "standalone".

So the proper answers to your questions are:

Is Next.js 13 do the minification itself for me?

Yes it will minify for you and it seems that it doesn't rely on devDependencies in order to achieve it.

Should I separate them manually, defying create-next-app's recommendation?

No, according to Balázs Orbán you shouldn't or, at least, you don't have to. But I think that as it is not required by next.js it is not forbidden also, because many of the official examples are still separating them.

Please note that, for react applications that don't use next.js (and also other kind of applications based on npm and yarn package managers) the separation between dependencies and devDependencies is still necessary.

Note: Kelvin has already answered it. But as a commentary it was a little bit hidden. I'm posting it as an answer with some more explanation just to highlight the answers for those, like me, that get here by searching.

You should boldface the `Please note that, for react applications that don't use next.js [parenthetical] that separation between dependencies and devDependencies` **is still necessary**. — morganney, Aug 14 '23 at 16:54
@morganney, Although I could, I don't think I should. We're clearly talking about next.js. The question is about next.js. That paragraph is just a foot note, a courtesy reminder or a disambiguation note. I don't think that it should be highlighted in any way. — Iogui, Aug 16 '23 at 23:59

score 2 · Answer 2 · answered Dec 24 '22 at 11:33

this is probably a bug

should be this

"dependencies": {
  "@next/font": "13.1.1",
  "next": "13.1.1",
  "react": "18.2.0",
  "react-dom": "18.2.0"
},
"devDependencies": {
  "@types/node": "18.11.17",
  "@types/react": "18.0.26",
  "@types/react-dom": "18.0.10",
  "eslint": "8.30.0",
  "eslint-config-next": "13.1.1",
  "typescript": "4.9.4"
}

note that as of now @next/font also installed automatically

Next.js 13 devDependencies?

2 Answers2