feat(nextjs): turn off svgr by default for new apps (#6634)

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,
+  },
+});
+```

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,
   },
 };
 

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>