diff --git a/docs/shared/packages/next/next-config-setup.md b/docs/shared/packages/next/next-config-setup.md
index d6b4511c45..2151effb0b 100644
--- a/docs/shared/packages/next/next-config-setup.md
+++ b/docs/shared/packages/next/next-config-setup.md
@@ -16,7 +16,7 @@ understand workspace libraries, and other Nx-specific features. See below for an
 module.exports = withNx({
   // Nx configuration goes here
   nx: {
-    svgr: false,
+    babelUpwardRootMode: true,
   },
   // Add Next.js configuration goes here
 });
@@ -38,7 +38,9 @@ The `withNx` Next.js plugin provides integration with Nx, including support for
 
 Type: `boolean`
 
-Set this to true if you would like to to use SVGR. See: https://react-svgr.com/
+Set this to true if you would like to use SVGR. See: https://react-svgr.com/
+
+**Deprecated:** Configure SVGR support in your `next.config.js` file without Nx. This option will be removed in Nx 22. See: https://react-svgr.com/docs/next/
 
 #### babelUpwardRootMode
 
@@ -60,9 +62,8 @@ const { composePlugins, withNx } = require('@nx/next');
  **/
 const nextConfig = {
   nx: {
-    // Set this to true if you would like to to use SVGR
-    // See: https://github.com/gregberge/svgr
-    svgr: false,
+    svgr: true,
+    babelUpwardRootMode: true,
   },
   // Add Next.js configuration here
 };
diff --git a/docs/shared/packages/webpack/webpack-plugins.md b/docs/shared/packages/webpack/webpack-plugins.md
index ae9c012eb4..e622be408a 100644
--- a/docs/shared/packages/webpack/webpack-plugins.md
+++ b/docs/shared/packages/webpack/webpack-plugins.md
@@ -347,6 +347,8 @@ Type: `boolean`
 
 Enables or disables [React SVGR](https://react-svgr.com/). Default is `true`.
 
+**Deprecated:** Add SVGR support in your Webpack configuration without relying on Nx. This option will be removed in Nx 22. See https://react-svgr.com/docs/webpack/
+
 #### Example
 
 ```js
diff --git a/packages/next/plugins/with-nx.ts b/packages/next/plugins/with-nx.ts
index b5e444f452..f9c63040cf 100644
--- a/packages/next/plugins/with-nx.ts
+++ b/packages/next/plugins/with-nx.ts
@@ -22,9 +22,8 @@ export interface SvgrOptions {
 export interface WithNxOptions extends NextConfig {
   nx?: {
     /**
-     * @deprecated Next.js via turbo conflicts with how webpack handles the import of SVGs.
-     * It is best to configure SVGR manually with the `@svgr/webpack` loader.
-     * We will remove this option in Nx 21.
+     * @deprecated Add SVGR support in your Webpack configuration without relying on Nx. See https://react-svgr.com/docs/webpack/
+     * TODO(v22): Remove this option and migrate userland webpack config to explicitly configure @svgr/webpack
      * */
     svgr?: boolean | SvgrOptions;
     babelUpwardRootMode?: boolean;
@@ -374,26 +373,7 @@ export function getNextConfig(
 
         const svgrOptions =
           typeof nx?.svgr === 'object' ? nx.svgr : defaultSvgrOptions;
-        // TODO(v21): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
-        // It should be:
-        // use: [{
-        //   test: /\.svg$/i,
-        //   type: 'asset',
-        //   resourceQuery: /react/, // *.svg?react
-        // },
-        // {
-        //   test: /\.svg$/i,
-        //   issuer: /\.[jt]sx?$/,
-        //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
-        //   use: ['@svgr/webpack'],
-        // }],
-        // See:
-        // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
-        // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
-        // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
-        // Note: We also need a migration for any projects that are using SVGR to convert
-        //       `import { ReactComponent as X } from './x.svg` to
-        //       `import X from './x.svg?react';
+        // TODO(v22): Remove SVGR support
         config.module.rules.push({
           test: /\.svg$/,
           issuer: { not: /\.(css|scss|sass)$/ },
diff --git a/packages/next/src/generators/application/application.spec.ts b/packages/next/src/generators/application/application.spec.ts
index 6ad84b4b18..5afabe5292 100644
--- a/packages/next/src/generators/application/application.spec.ts
+++ b/packages/next/src/generators/application/application.spec.ts
@@ -523,11 +523,9 @@ describe('app', () => {
        * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
        **/
       const nextConfig = {
-        nx: {
-          // Set this to true if you would like to use SVGR
-          // See: https://github.com/gregberge/svgr
-          svgr: false,
-        },
+        // Use this to set Nx-specific options
+        // See: https://nx.dev/recipes/next/next-config-setup
+        nx: {},
       };
 
       const plugins = [
diff --git a/packages/next/src/generators/application/files/common/next.config.js__tmpl__ b/packages/next/src/generators/application/files/common/next.config.js__tmpl__
index 1f72edb756..26ea21f205 100644
--- a/packages/next/src/generators/application/files/common/next.config.js__tmpl__
+++ b/packages/next/src/generators/application/files/common/next.config.js__tmpl__
@@ -12,11 +12,9 @@ const { withLess } = require('@nx/next/plugins/with-less');
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
-  nx: {
-    // Set this to true if you would like to to use SVGR
-    // See: https://github.com/gregberge/svgr
-    svgr: false,
-  },
+  // Use this to set Nx-specific options
+  // See: https://nx.dev/recipes/next/next-config-setup
+  nx: {},
 };
 
 const plugins = [
@@ -36,11 +34,9 @@ module.exports = composePlugins(...plugins)(nextConfig);
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
-  nx: {
-    // Set this to true if you would like to to use SVGR
-    // See: https://github.com/gregberge/svgr
-    svgr: false,
-  },
+  // Use this to set Nx-specific options
+  // See: https://nx.dev/recipes/next/next-config-setup
+  nx: {},
   <% if (style === 'styled-components') { %>
   compiler: {
     // For other options, see https://styled-components.com/docs/tooling#babel-plugin
@@ -66,11 +62,9 @@ module.exports = composePlugins(...plugins)(nextConfig);
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
-  nx: {
-    // Set this to true if you would like to use SVGR
-    // See: https://github.com/gregberge/svgr
-    svgr: false,
-  },
+  // Use this to set Nx-specific options
+  // See: https://nx.dev/recipes/next/next-config-setup
+  nx: {},
 };
 
 const plugins = [
diff --git a/packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts b/packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts
index a114be67d5..981568128c 100644
--- a/packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts
+++ b/packages/react/plugins/nx-react-webpack-plugin/lib/apply-react-config.ts
@@ -21,26 +21,6 @@ export function applyReactConfig(
     const svgrOptions =
       typeof options.svgr === 'object' ? options.svgr : defaultSvgrOptions;
 
-    // TODO(v21): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
-    // It should be:
-    // use: [{
-    //   test: /\.svg$/i,
-    //   type: 'asset',
-    //   resourceQuery: /react/, // *.svg?react
-    // },
-    // {
-    //   test: /\.svg$/i,
-    //   issuer: /\.[jt]sx?$/,
-    //   resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
-    //   use: ['@svgr/webpack'],
-    // }],
-    // See:
-    // - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
-    // - Vite: https://www.npmjs.com/package/vite-plugin-svgr
-    // - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
-    // Note: We also need a migration for any projects that are using SVGR to convert
-    //       `import { ReactComponent as X } from './x.svg` to
-    //       `import X from './x.svg?react';
     config.module.rules.push({
       test: /\.svg$/,
       issuer: /\.(js|ts|md)x?$/,
diff --git a/packages/react/plugins/with-react.ts b/packages/react/plugins/with-react.ts
index ac3e5fdec4..80d702fdf4 100644
--- a/packages/react/plugins/with-react.ts
+++ b/packages/react/plugins/with-react.ts
@@ -10,6 +10,10 @@ export interface SvgrOptions {
   ref?: boolean;
 }
 export interface WithReactOptions extends WithWebOptions {
+  /**
+   * @deprecated Add SVGR support in your Webpack configuration without relying on Nx. See https://react-svgr.com/docs/webpack/
+   * TODO(v22): Remove this option and migrate userland webpack config to explicitly configure @svgr/webpack
+   * */
   svgr?: boolean | SvgrOptions;
 }
 
diff --git a/packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts b/packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts
index cdbb6e0c14..7734c1aaae 100644
--- a/packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts
+++ b/packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts
@@ -426,6 +426,7 @@ export function applyWebConfig(
           },
         },
       },
+      // TODO(v22): Remove this but provide a migration in `@nx/react` to add @svgr/webpack in userland webpack config
       // SVG: same as image but we need to separate it so it can be swapped for SVGR in the React plugin.
       {
         test: /\.svg$/,