fix(nextjs): fix Next.js schematics to support dynamic routes and rem…

…ove unnecessary next plugins (as of 9.5) (#3574)

Closes #2478, #2490

docs/angular/api-next/schematics/page.md

@@ -38,6 +38,14 @@ nx g component my-component --project=mylib --classComponent
 
 ## Options
 
+### directory
+
+Alias(es): d
+
+Type: `string`
+
+Create the page under this directory (can be nested). Will be created under 'pages/'.
+
 ### export
 
 Alias(es): e

docs/react/api-next/schematics/page.md

@@ -38,6 +38,14 @@ nx g component my-component --project=mylib --classComponent
 
 ## Options
 
+### directory
+
+Alias(es): d
+
+Type: `string`
+
+Create the page under this directory (can be nested). Will be created under 'pages/'.
+
 ### export
 
 Alias(es): e

e2e/next/src/next.test.ts

@@ -80,31 +80,18 @@ forEachCli('nx', () => {
 
       runCLI(`generate @nrwl/next:app ${appName} --no-interactive`);
 
-      runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);
+      runCLI(
+        `generate @nrwl/react:lib ${libName} --no-interactive --style=none`
+      );
 
       const mainPath = `apps/${appName}/pages/index.tsx`;
       updateFile(mainPath, `import '@proj/${libName}';\n` + readFile(mainPath));
-      updateFile(
-        `apps/${appName}/next.config.js`,
-        `
-const withCSS = require('@zeit/next-css');
-module.exports = withCSS({
-  cssModules: false,
-  generateBuildId: function () {
-    return 'fixed';
-  }
-});
-      `
-      );
 
       await checkApp(appName, {
         checkUnitTest: true,
         checkLint: true,
         checkE2E: false,
       });
-
-      // check that the configuration was consumed
-      expect(readFile(`dist/apps/${appName}/.next/BUILD_ID`)).toEqual('fixed');
     }, 120000);
 
     it('should be able to dynamically load a lib', async () => {
@@ -113,7 +100,9 @@ module.exports = withCSS({
       const libName = uniq('lib');
 
       runCLI(`generate @nrwl/next:app ${appName} --no-interactive`);
-      runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);
+      runCLI(
+        `generate @nrwl/react:lib ${libName} --no-interactive --style=none`
+      );
 
       const mainPath = `apps/${appName}/pages/index.tsx`;
       updateFile(
@@ -181,8 +170,8 @@ module.exports = withCSS({
         import { TestComponent } from '@proj/${tsxLibName}';\n\n
         ` +
           content.replace(
-            `<main>`,
-            `<main>
+            `</h2>`,
+            `</h2>
               <div>
                 {testFn()}
                 <TestComponent text="Hello Next.JS" />

package.json

@@ -166,7 +166,7 @@
     "mime": "2.4.4",
     "mini-css-extract-plugin": "0.8.0",
     "minimatch": "3.0.4",
-    "next": "9.3.3",
+    "next": "9.5.2",
     "ng-packagr": "9.1.0",
     "ngrx-store-freeze": "0.2.4",
     "npm-run-all": "^4.1.5",

packages/next/migrations.json

@@ -39,7 +39,7 @@
       "version": "10.1.0-beta.0",
       "packages": {
         "next": {
-          "version": "9.5.1",
+          "version": "9.5.2",
           "alwaysAddToPackageJson": false
         },
         "node-sass": {

packages/next/src/builders/export/export.impl.ts

@@ -40,6 +40,7 @@ function run(
             exportApp(
               root,
               {
+                statusMessage: 'Exporting',
                 silent: options.silent,
                 threads: options.threads,
                 outdir: `${buildOptions.outputPath}/exported`,

packages/next/src/schematics/application/application.spec.ts

@@ -56,7 +56,9 @@ describe('app', () => {
         { name: 'myApp', style: 'scss' },
         appTree
       );
-      expect(result.exists('apps/my-app/pages/index.scss')).toEqual(true);
+      expect(result.exists('apps/my-app/pages/index.module.scss')).toEqual(
+        true
+      );
     });
   });
 

packages/next/src/schematics/application/files/next.config.js__tmpl__

@@ -1,11 +1,4 @@
-<% if (style === 'scss') { %>
-const withSass = require('@zeit/next-sass');
-module.exports = withSass({
-  // Set this to true if you use CSS modules.
-  // See: https://github.com/css-modules/css-modules
-  cssModules: false
-});
-<% } else if (style === 'less') { %>
+<% if (style === 'less') { %>
 const withLess = require('@zeit/next-less');
 module.exports = withLess({
   // Set this to true if you use CSS modules.
@@ -19,13 +12,6 @@ module.exports = withStylus({
   // See: https://github.com/css-modules/css-modules
   cssModules: false
 });
-<% } else if (style === 'css') { %>
-const withCSS = require('@zeit/next-css');
-module.exports = withCSS({
-  // Set this to true if you use CSS modules.
-  // See: https://github.com/css-modules/css-modules
-  cssModules: false
-});
 <% } else if (
   style === 'styled-components'
   ||style === '@emotion/styled'
@@ -34,11 +20,6 @@ module.exports = withCSS({
 ) { %>
 module.exports ={};
 <% } else {
-// Defaults to CSS %>
-const withCSS = require('@zeit/next-css');
-module.exports = withCSS({
-  // Set this to true if you use CSS modules.
-  // See: https://github.com/css-modules/css-modules
-  cssModules: false
-});
+// Defaults to CSS/SASS (which don't need plugin as of Next 9.3) %>
+module.exports ={};
 <% } %>

packages/next/src/schematics/application/files/pages/__fileName__.module.__style__

@@ -0,0 +1,2 @@
+.page {
+}

packages/next/src/schematics/application/files/pages/__fileName__.tsx__tmpl__

@@ -1,16 +1,15 @@
 import React from 'react';
 <% if (styledModule && styledModule !== 'styled-jsx') {
-  var wrapper = 'StyledApp';
+  var wrapper = 'StyledPage';
 %>import styled from '<%= styledModule %>';<% } else {
   var wrapper = 'div';
 %>
-  <%= style !== 'styled-jsx' ? `import './${fileName}.${style}';` : '' %>
+  <%= style !== 'styled-jsx' ? `import styles from './${fileName}.module.${style}';` : '' %>
 <% }
 %>
-import { ReactComponent as NxLogo } from '../public/nx-logo-white.svg';
 
 <% if (styledModule && styledModule !== 'styled-jsx') { %>
-const StyledApp = styled.div`<%= styleContent %>`;
+const StyledPage = styled.div`<%= styleContent %>`;
 <% }%>
 
 export const Index = () => {
@@ -20,7 +19,7 @@ export const Index = () => {
    * Note: The corresponding styles are in the ./${fileName}.${style} file.
    */
   return (
-    <<%= wrapper %><% if (!styledModule || styledModule === 'styled-jsx') {%> className="app"<% } %>>
+    <<%= wrapper %><% if (!styledModule || styledModule === 'styled-jsx') {%> className={styles.page}<% } %>>
       <%= styledModule === 'styled-jsx' ? `<style jsx>{\`${styleContent}\`}</style>` : `` %>
       <%= appContent %>
     </<%= wrapper %>>

packages/next/src/schematics/application/files/pages/_app.tsx__tmpl__

@@ -0,0 +1,26 @@
+import React from 'react';
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import { ReactComponent as NxLogo } from '../public/nx-logo-white.svg';
+import './styles.css';
+
+const CustomApp = ({ Component, pageProps }: AppProps) => {
+  return (
+    <>
+      <Head>
+        <title>Welcome to <%= name %>!</title>
+      </Head>
+      <div className="app">
+        <header className="flex">
+          <NxLogo width="75" height="50" />
+          <h1>Welcome to <%= name %>!</h1>
+        </header>
+        <main>
+          <Component {...pageProps}/>
+        </main>
+      </div>
+    </>
+  );
+};
+
+export default CustomApp;

packages/next/src/schematics/application/files/pages/_document.tsx__tmpl__

@@ -19,7 +19,6 @@ export default class CustomDocument extends Document<{ styleTags: ReactElement[]
     return (
       <html>
         <Head>
-          <title>Welcome to <%= name %>!</title>
           {this.props.styleTags}
         </Head>
         <body>

packages/next/src/schematics/application/files/specs/__fileName__.spec.tsx__tmpl__

@@ -8,9 +8,4 @@ describe('Index', () => {
     const { baseElement } = render(<Index />);
     expect(baseElement).toBeTruthy();
   });
-
-  it('should have a greeting as the title', () => {
-    const { getByText } = render(<Index />);
-    expect(getByText('Welcome to <%= projectName %>!')).toBeTruthy();
-  });
 });