Best way to use project references inside a Nextjs app

[rock-it-rob]

I've been following the guides I see on the Nx site and the typescript site for setting up project references, but I've come to a situation where I need some guidance.

What I'm sharing here is a very small reproduction of a larger, confidential project but it's enough to demonstrate my issue. This sample project looks like this:

• apps
  • sample-ui (nextjs)
• libs
  • components (mui)
  • dates (dayjs helpers)

What I want to accomplish is typechecking all projects and their test files.

The libs are fine and work great. Nextjs is the issue. Nextjs will overwrite the tsconfig.json file every time it runs if it doesn't find options it wants and is totally oblivious to project references. This is an open issue with Nextjs. I can work around it, but just mentioning it here for reference.

Attempting to follow the Nx guide here: https://nx.dev/docs/technologies/typescript/guides/switch-to-workspaces-project-references
results in a conflict between what Nextjs wants and what Typescript wants. Nextjs wants noEmit set to true but project references require declaration files to be emitted. So the options I can see are:

• Use a single tsconfig.json for the Nextjs app. This means I have to include my test files in with my implementation files. I honestly don't know if Next can tree-shake these out when it runs its build process.
  OR
• Use project references by splitting out my test files and emitting files to a temporary directory while typechecking.

I've gone with the second option in this test repository but is there's a better way to accomplish this?

Here's my code:

https://github.com/rock-it-rob/nx-sample