Why generating an app with @nx/next does not produce recommended tsconfigs?

[egorkarimov]

Why generating a lib or a react app nx g @nx/react:app and generating next app via nx g @nx/next:app produces different tsconfigs?

In the first case, I get tsconfig.json and tsconfig.app.json as it is recommended in TS Linking docs (https://nx.dev/concepts/typescript-project-linking). However, for nextjs I get a single tsconfig.json.

---

Additionally, in TS Linking docs there is no description on apps' tsconfigs — only libs. That's why I am not sure about the configName property in the workspace root tsconfig.json:

{
  "plugin": "@nx/js/typescript",
  "options": {
    "typecheck": {
      "targetName": "typecheck"
    },
    "build": {
      "targetName": "build",
      "configName": "tsconfig.lib.json", // <-- why *.lib only?
      "buildDepsName": "build-deps",
      "watchDepsName": "watch-deps"
    }
  }
}

Can you explain?

UPD: I understood, that this configuration is relevant only for @nx/js plugin; other plugins do not follow @nx/js configName convention.

---

I also experimented and generated nextjs app (nx g @nx/next:app) with unit and e2e tests. With e2e enabled, it generates tsconfig.spec.json, but reference is flipped. Usually, main tsconfig.json would reference additional specific configs, but not in this case:

// apps/my-next-app/tsconfig.spec.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
   //…
  },
  "include": [
    //…
  ],
  "references": [
    {
      "path": "./tsconfig.json" // <-- references project's main config
    }
  ]
}

Why is that?

[yordan-kanchelov]

my guess is we could do a PR to update the templates. there are other things as well that are being generated with outdated structure. currently , our solution was creating custom generators that the team will be using

[egorkarimov]

I just noticed that the nx structure (tsconfig.json + tsconfig.app.json) for tsconfigs breaks nextjs linter.

➜  myapp git:(main) ✗ pnpm --filter myapp-web lint

> [email protected] lint /…/apps/myapp-web
> next lint

/…/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected][email protected]/node_modules/next/dist/build/next-config-ts/transpile-config.js:16
    const resolvedBaseUrl = (0, _nodepath.join)(cwd, compilerOptions.baseUrl ?? '.');
...                                                                  ^