From e0028d30f6f92b024a072f9660f0678ed5fb934d Mon Sep 17 00:00:00 2001
From: Kirils L <9858620+kirjai@users.noreply.github.com>
Date: Fri, 6 Aug 2021 18:28:15 +0100
Subject: [PATCH] feat(nextjs): turn off svgr by default for new apps (#6634)

---
 docs/react/guides/adding-assets.md               | 10 ++++++++++
 .../application/files/next.config.js__tmpl__     | 16 ++++++++--------
 .../application/files/pages/_app.tsx__tmpl__     |  4 ++--
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/docs/react/guides/adding-assets.md b/docs/react/guides/adding-assets.md
index 6a646e3143..7c3b2b2cdd 100644
--- a/docs/react/guides/adding-assets.md
+++ b/docs/react/guides/adding-assets.md
@@ -37,3 +37,13 @@ export default Header;
 ```
 
 This method of import allow you to work with the SVG the same way you would with any other React component. You can style it using CSS, styled-components, etc. The SVG component accepts a `title` prop, as well as any other props that the `svg` element accepts.
+
+Note that if you are using Next.js, you have to opt into this behavior. To import SVGs as React components with Next.js, you need to make sure that `nx.svgr` value is set to `true` in your Next.js application's `next.config.js` file:
+
+```js
+module.exports = withNx({
+  nx: {
+    svgr: true,
+  },
+});
+```
diff --git a/packages/next/src/generators/application/files/next.config.js__tmpl__ b/packages/next/src/generators/application/files/next.config.js__tmpl__
index bc471a5559..34852df51f 100644
--- a/packages/next/src/generators/application/files/next.config.js__tmpl__
+++ b/packages/next/src/generators/application/files/next.config.js__tmpl__
@@ -9,9 +9,9 @@ const withLess = require('@zeit/next-less');
  **/
 const nextConfig = {
   nx: {
-    // Set this to false if you do not want to use SVGR
+    // Set this to true if you would like to to use SVGR
     // See: https://github.com/gregberge/svgr
-    svgr: true,
+    svgr: false,
   },
   // Set this to true if you use CSS modules.
   // See: https://github.com/css-modules/css-modules
@@ -29,9 +29,9 @@ const withStylus = require('@zeit/next-stylus');
  **/
 const nextConfig = {
   nx: {
-    // Set this to false if you do not want to use SVGR
+    // Set this to true if you would like to to use SVGR
     // See: https://github.com/gregberge/svgr
-    svgr: true,
+    svgr: false,
   },
   // Set this to true if you use CSS modules.
   // See: https://github.com/css-modules/css-modules
@@ -52,9 +52,9 @@ module.exports = withStylus(withNx(nextConfig));
  **/
 const nextConfig = {
   nx: {
-    // Set this to false if you do not want to use SVGR
+    // Set this to true if you would like to to use SVGR
     // See: https://github.com/gregberge/svgr
-    svgr: true,
+    svgr: false,
   },
 };
 
@@ -66,9 +66,9 @@ module.exports = withNx(nextConfig);
  **/
 const nextConfig = {
   nx: {
-    // Set this to false if you do not want to use SVGR
+    // Set this to true if you would like to to use SVGR
     // See: https://github.com/gregberge/svgr
-    svgr: true,
+    svgr: false,
   },
 };
 
diff --git a/packages/next/src/generators/application/files/pages/_app.tsx__tmpl__ b/packages/next/src/generators/application/files/pages/_app.tsx__tmpl__
index ace726ec00..fb08f96217 100644
--- a/packages/next/src/generators/application/files/pages/_app.tsx__tmpl__
+++ b/packages/next/src/generators/application/files/pages/_app.tsx__tmpl__
@@ -1,6 +1,5 @@
 import { AppProps } from 'next/app';
 import Head from 'next/head';
-import { ReactComponent as NxLogo } from '../public/nx-logo-white.svg';
 import './styles.<%= stylesExt %>';
 
 function CustomApp({ Component, pageProps }: AppProps) {
@@ -11,7 +10,8 @@ function CustomApp({ Component, pageProps }: AppProps) {
       </Head>
       <div className="app">
         <header className="flex">
-          <NxLogo width="75" height="50" />
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src="/nx-logo-white.svg" alt="Nx logo" width="75" height="50" />
           <h1>Welcome to <%= name %>!</h1>
         </header>
         <main>