docs(nextjs): fix incorrect build output path and vite.config.ts mention (#31671)

## Changes

- Update build output path from {workspaceRoot}/dist/{projectRoot} to
.next folder
- Replace vite.config.ts example with next.config.js distDir
configuration
- Add note about legacy executor configuration vs inferred tasks
- Clarify that sourceRoot may not exist in all Next.js projects


🤖 Generated with [Claude Code](https://claude.ai/code)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
The docs for Next.js says output can be configured in `vite.config.ts`,
which is nonsense. It also mentions the output directory that is only
applicable in the legacy setup.

## Expected Behavior
Fix configuration example, and show different ways to configure output
(both new crystal setup, and legacy executor-based setup).

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #31037

Co-authored-by: Claude <noreply@anthropic.com>

docs/generated/packages/next/documents/overview.md

@@ -239,27 +239,32 @@ And if you generated a library with `--bundler`, then you can build a library as
 nx build my-new-lib
 ```
 
-After running a build, the output will be in the `{workspaceRoot}/dist/{projectRoot}` folder.
+After running a build, the output will be in the `.next` folder inside your app's project directory by default. The output directory can be changed through configuration.
 
 {% tabs %}
 
-{% tab label="Using inferred tasks" %}
+{% tab label="@nx/next/plugin and next.config.js" %}
 
-You can customize the output folder path by update the bundler's config. For example vite's config can be updated in `vite.config.ts`:
+You can customize the output folder path by updating the Next.js config. For example, you can set a custom `distDir` in `next.config.js`:
 
-```typescript {% fileName="apps/my-next-app/vite.config.ts" highlightLines=[4]%}
+```javascript {% fileName="apps/my-next-app/next.config.js" highlightLines=[2]%}
-import { defineConfig } from 'vite';
+const nextConfig = {
-export default defineConfig(() => ({
+  distDir: 'dist',
-  build: {
+};
-    outDir: 'dist/my-next-app',
+
-  },
+module.exports = nextConfig;
-}));
 ```
 
+Note: This approach works best if you have `@nx/next/plugin` installed in your `nx.json`. You can add it with `nx add @nx/next`.
+
 {% /tab %}
 
 {% tab label="Using the @nx/next:build executor" %}
 
+{% callout type="note" title="Legacy Configuration" %}
+This approach is for projects not using the `@nx/next/plugin` in `nx.json`. If you have the plugin configured, it will automatically infer tasks from your Next.js configuration. See the [Inferred Tasks concept page](/concepts/inferred-tasks) for more details.
+{% /callout %}
+
 You can customize the output folder by setting `outputPath` in the project's `project.json` file
 
 ```json {% fileName="apps/my-next-app/project.json" highlightLines=[9]%}
@@ -278,6 +283,8 @@ You can customize the output folder by setting `outputPath` in the project's `pr
 }
 ```
 
+Note that the `sourceRoot` property may not exist for all Next.js applications, as it depends on your project structure.
+
 {% /tab %}
 {% /tabs %}
 

docs/shared/packages/next/plugin-overview.md

@@ -239,27 +239,32 @@ And if you generated a library with `--bundler`, then you can build a library as
 nx build my-new-lib
 ```
 
-After running a build, the output will be in the `{workspaceRoot}/dist/{projectRoot}` folder.
+After running a build, the output will be in the `.next` folder inside your app's project directory by default. The output directory can be changed through configuration.
 
 {% tabs %}
 
-{% tab label="Using inferred tasks" %}
+{% tab label="@nx/next/plugin and next.config.js" %}
 
-You can customize the output folder path by update the bundler's config. For example vite's config can be updated in `vite.config.ts`:
+You can customize the output folder path by updating the Next.js config. For example, you can set a custom `distDir` in `next.config.js`:
 
-```typescript {% fileName="apps/my-next-app/vite.config.ts" highlightLines=[4]%}
+```javascript {% fileName="apps/my-next-app/next.config.js" highlightLines=[2]%}
-import { defineConfig } from 'vite';
+const nextConfig = {
-export default defineConfig(() => ({
+  distDir: 'dist',
-  build: {
+};
-    outDir: 'dist/my-next-app',
+
-  },
+module.exports = nextConfig;
-}));
 ```
 
+Note: This approach works best if you have `@nx/next/plugin` installed in your `nx.json`. You can add it with `nx add @nx/next`.
+
 {% /tab %}
 
 {% tab label="Using the @nx/next:build executor" %}
 
+{% callout type="note" title="Legacy Configuration" %}
+This approach is for projects not using the `@nx/next/plugin` in `nx.json`. If you have the plugin configured, it will automatically infer tasks from your Next.js configuration. See the [Inferred Tasks concept page](/concepts/inferred-tasks) for more details.
+{% /callout %}
+
 You can customize the output folder by setting `outputPath` in the project's `project.json` file
 
 ```json {% fileName="apps/my-next-app/project.json" highlightLines=[9]%}
@@ -278,6 +283,8 @@ You can customize the output folder by setting `outputPath` in the project's `pr
 }
 ```
 
+Note that the `sourceRoot` property may not exist for all Next.js applications, as it depends on your project structure.
+
 {% /tab %}
 {% /tabs %}