How do I distinguish between dependency and devDependency?

[athrunsun]

Less plugin documentation tells me to install @zeit/next-less and less in dependency section instead of devDependency. This is intentional right?

From my previous SPA development experience, css preprocessors are devDependency, only those that I import in files under src folder belong to dependency section. Does this rule still apply to nextjs?

If not, when I want to add a package (for example, a babel preset), how do I distinguish it between dependency and devDependency?

[janhoogeveen]

It really doesn't matter that much. I like to keep everything related to my tools in devDependencies, but for your build... in general there's no difference.

You might run into issues when when you set your NODE_ENV to "production" or run yarn install --production=true manually.

Anyhow, babel would be a devDependency for me. Anything that doesn't get shipped to the client counts.

[rafaelalmeidatk]

The short answer is: it doesn't matter, unless you are only installing dependencies (with npm/yarn install --production). For consistency, I add all build/dev/test tools in devDependencies, and the rest of the stuff in dependencies.

The situation where you might face problems is when you are only installing the dependencies and not devDependencies. Keep in mind Next.js will run your code both in the client and the server, so if you have a server-rendered page, and the app does not have less listed in the dependencies list, then your server will crash when trying to render the page.

From my previous SPA development experience, css preprocessors are devDependency, only those that I import in files under src folder belong to dependency section.

Fun fact: for SPAs everything can be in devDependencies, since all the code is bundled, your app doesn't have Node.js runtime dependencies.