NEXT JS: Scss import issue and deployment strategy concerns

• [x ] I am running the latest version
• [x ] I checked the documentation (nx.dev) and found no answer
• [x ] I checked to make sure that this issue has not already been filed
• [x ] I’m reporting the issue to the correct repository (not related to React, Angular or any dependency)

Context

I’m creating this issue following @jaysoo suggestion. Next 9.1.5 has css built-in, so importing css files can be done out-of-the-box. Just add an import to _app.js:

import 'myCss.css';

A normal next app (9.1.5) needs withSass to compile and import scss files though.

Strangely enough, the same project ported to nx workspace (same exact configuration, package.json, dependencies, etc) doesn’t need withSass. Running ‘nx serve myApp’ or ‘nx build myApp’ works like a charm.

This ties in with deployment, I’ll explain why below.

Expected Behavior

‘nx serve myNextJsApp’ is consistent with running ‘next build’. Either way (with or without withSass plugin) we want to be able to build the application, from a nx workspace and out of it.

PLUS: Have a structured strategy to deploy Next Js applications on hosting platforms like Heroku/Now.

Current Behavior

‘nx serve myNextJsApp’ is not consistent with running ‘next build’. TLDR: nx is correct, next is not. I am opening this issue also on next repo for them to look into.

Steps to Reproduce

A bit of introduction:

WHY: I want to deploy a next js application from my nx workspace (let’s leave CI/CD on a side for now, but the long term plan would be to manage deployment with CI/CD and not manually).

As far as I was able to understand the common nx strategy to deploy an app is to build it and deploy artifacts.

When I run ‘nx build myApp’ my .next folder is copied to dist/apps/myNextJsApp which is already a problem since the minimal structure for a Next js app to be deployed is:

root

• .next
• public
• package.json
• node_modules

Anyway, let’s say I move the folders manually into this structure.

This works on a hosting platform that doesn’t have a build step. If the hosting platform has an automatic build step this fails, since there is no project to build (please clarify if I’m missing something here). Therefore we need to skip ‘nx build’ and deploy the project folder instead (nxRoot/apps/myNextJsApp) and leave it to the hosting platform to build.

Please provide detailed steps for reproducing the issue.

1. generate a next app with nx workspace.
2. import scss in _app. The scss I am trying to import is a main.scss file with many partial @imports, also some properties have url() imports referencing static assets. Just clarifying this as I haven’t tried with a simple scss file).
3. run nx serve myNextJsAp: it should work without problems.
4. close, navigate to nxRoot/apps/myNextJsApp.

Now let’s prepare the project for deployment: 6. copy package.json from nxRoot to nxRoot/apps/myNextJsApp and replace scripts to:

"scripts": { "dev": "next", "start": "next start", "build": "next build", } 7. OPTIONAL: remove dependencies that are not strictly related to the app.

Lastlylet’s mimic what a hosting platform would do after pushing this project (I use git subtree for heroku or navigate to the folder and use now cli for zeit now):

1. run ‘yarn install’ or alternative ‘npm install’
2. run ‘yarn start’: see it fail since withSass plugin is needed to import scss files.

@jdpearce Please reply with detailed requirements and I can add them.

[jaysoo]

There’s a PR now to expose the next.config.js file by default (and automatically installs and uses the config enhancer matching the chosen style).

This should help a lot with folks trying to customize the config further.

Next up we need to add support for copying assets from the app to dist folder. This should be similar to other builders (such as @nrwl/web:build) that support the assets option to copy. files.

[jaysoo]

We’ve decided to support next.config.js instead of internalizing everything in Nx. Will work on something for the next release.