diff --git a/docs/generated/packages/next/documents/overview.md b/docs/generated/packages/next/documents/overview.md index b45bd25f9a..0097de8c55 100644 --- a/docs/generated/packages/next/documents/overview.md +++ b/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]%} -import { defineConfig } from 'vite'; -export default defineConfig(() => ({ - build: { - outDir: 'dist/my-next-app', - }, -})); +```javascript {% fileName="apps/my-next-app/next.config.js" highlightLines=[2]%} +const nextConfig = { + distDir: 'dist', +}; + +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 %} diff --git a/docs/shared/packages/next/plugin-overview.md b/docs/shared/packages/next/plugin-overview.md index b45bd25f9a..0097de8c55 100644 --- a/docs/shared/packages/next/plugin-overview.md +++ b/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]%} -import { defineConfig } from 'vite'; -export default defineConfig(() => ({ - build: { - outDir: 'dist/my-next-app', - }, -})); +```javascript {% fileName="apps/my-next-app/next.config.js" highlightLines=[2]%} +const nextConfig = { + distDir: 'dist', +}; + +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 %}