Nx: How to add a next.config.js file to customise a Next.js app

[asherccohen]

Expected Behavior

Be able to add a next.config.js to customise Next.js apps (for example to add sass compilation) when using Typescript.

Current Behavior

If your Nx Next.js app is a Typescript project (easy to do, just change the extension of your index.js file to tsx and next will create a tsconfig file for you) then any .js file will have problems to compile since "isolatedModules": true is required by babel.

Failure Information (for bugs)

• Cannot compile namespaces when the '--isolatedModules' flag is provided.
  If set to false, this will be reverted to true.
  The following changes are being made to your tsconfig.json file:
  
  
  
  • compilerOptions.isolatedModules must be true (requirement for babel)
  
  

Steps to Reproduce

1.Create a Next.js app

1. Convert to typescript (as explained above)
2. Add zeit/sass and node-sass to be able to compile .scss files
3. Create a next.config.js file (and optionally a postcss.config.js file) to customize sass compilation.
4. Compilation fails as js files are not included. Converting these files to .tsx fails since '--isolatedModules' flag is set to true.

WORKAROUND:
Turns out a global file cannot be compiled using '--isolatedModules'. Ensure your file contains imports, exports, or an 'export {}' statement.

So, added something like:

export const foo = 'foo';

It's a temporary solution.

Context

Please provide any relevant information about your setup:

• version of Nx used: v8.5.0

[Alivejke]

Hi @asherccohen do you have an example with this workaround working? I have the same issue but the fix that you mentioned doesn't work for me, for some reason it still doesn't pick up next.config.ts file

[asherccohen]

Sorry to hear that. Not really, I don't have a git repo to show you.

I have a pretty straightforward tsconfig generated by nx out of the box. I then manually create a next.config.ts file (I'm still confused why I can't have it as a js file instead and simply exclude it in tsconfig, you can try that but its not working, would like to know your findings).

What I do is then add (at the top)
export const foo = 'foo';

In my case it stops complaining. Unfortunately on deployment (for example using NOW) next.config.ts is NOT read. We clearly need a solution.

[Alivejke]

I've checked with nextjs documentation and they actually don't support next.config.ts, it should be next.config.js. There is a way to provide this configuration manually when usign nextjs custom server, as mentioned in this issue https://github.com/nrwl/nx/issues/1933 but unfortunatly there is another issue there. So for now I'm just waiting for a help from maintainers.

[ls-joris-desmedt]

@asherccohen Nx supports custom next.config.js files. Just put it in the root of your application as you would do for a normal Next.js application.

Also, Nx uses typescript by default, so you should not have to deal with it, and it also adds SASS support by default.

Check https://github.com/nrwl/nx/blob/master/packages/next/src/utils/config.ts, here you can see they already added the withSASS plugin and that they just load your config file like Next.js would do it.

[asherccohen]

Thanks @jorisdesmedt-is for the info. I have tried that but .js files cannot be added to an nx+next application. I get the above error about isolatedmodules. Also trying to change the tsconfig file reverts back automatically.

It looks like allowing js or excluding a file in tsconfig is ignored by the project.

[asherccohen]

Any news on this?

[Alivejke]

@asherccohen
Hey, I currently don't have time to take a look myself but maybe you can check this repo https://github.com/elliottsj/nx-nextjs-example that @elliottsj shared with the example with working next.config.js and see if it works for you?

[asherccohen]

Thanks.
That helped in an unexpected way. His project was giving me no problems so I looked more into the error. turns out I had a weird Azure management plugin installed in VScode that was somehow interfering.

I'll give it some time and come back to clese the issue if I feel it's completely gone.

[asherccohen]

This is now resolved.

[demisx]

I’ve added next.config.js to apps/[app-name]/directory but it doesn’t get picked up. Am I missing something?