fix(nextjs): copy public folder to dist when building Next app

Closes nrwl#3019

e2e/next.test.ts

@@ -231,6 +231,7 @@ async function checkApp(
   const buildResult = runCLI(`build ${appName}`);
   expect(buildResult).toContain(`Compiled successfully`);
   checkFilesExist(`dist/apps/${appName}/.next/build-manifest.json`);
+  checkFilesExist(`dist/apps/${appName}/public/star.svg`);
 
   const packageJson = readJson(`dist/apps/${appName}/package.json`);
   expect(packageJson.dependencies.react).toBeDefined();

packages/next/package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@nrwl/react": "*",
+    "@nrwl/web": "*",
     "@angular-devkit/schematics": "~9.1.0",
     "@svgr/webpack": "^4.3.3",
     "url-loader": "^2.2.0"

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

@@ -9,7 +9,7 @@ import './<%= fileName %>.<%= style %>';
 
 <% }
 %>
-import { ReactComponent as NxLogo } from '../assets/nx-logo-white.svg';
+import { ReactComponent as NxLogo } from '../public/nx-logo-white.svg';
 
 <% if (styledModule) { %>
 const StyledApp = styled.div`
@@ -160,7 +160,7 @@ var innerJsx = `
     <div className="flex github-star-container">
       <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
         <div className="github-star-badge">
-          <svg className="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
+          <img src="/star.svg" className="material-icons" alt="" />
             Star
         </div>
       </a>

packages/next/src/utils/config.spec.ts

@@ -19,8 +19,8 @@ describe('Next.js webpack config builder', () => {
     it('should set the resolve plugins', () => {
       const webpackConfig = createWebpackConfig('/root', 'apps/wibble', []);
 
-      const config = webpackConfig(
-        { resolve: { alias: {} }, module: { rules: [] } },
+      webpackConfig(
+        { resolve: { alias: {} }, module: { rules: [] }, plugins: [] },
         { defaultLoaders: {} }
       );
 
@@ -40,7 +40,7 @@ describe('Next.js webpack config builder', () => {
       ]);
 
       const config = webpackConfig(
-        { resolve: { alias: {} }, module: { rules: [] } },
+        { resolve: { alias: {} }, module: { rules: [] }, plugins: [] },
         { defaultLoaders: {} }
       );
 
@@ -54,7 +54,7 @@ describe('Next.js webpack config builder', () => {
       const webpackConfig = createWebpackConfig('/root', 'apps/wibble', []);
 
       const config = webpackConfig(
-        { resolve: { alias: {} }, module: { rules: [] } },
+        { resolve: { alias: {} }, module: { rules: [] }, plugins: [] },
         { defaultLoaders: {} }
       );
 

packages/next/src/utils/config.ts

@@ -9,12 +9,9 @@ import loadConfig from 'next/dist/next-server/server/config';
 import { join, resolve } from 'path';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import { Configuration } from 'webpack';
-import {
-  FileReplacement,
-  NextBuildBuilderOptions,
-  NextServeBuilderOptions,
-} from './types';
+import { FileReplacement, NextBuildBuilderOptions } from './types';
 import { BuilderContext } from '@angular-devkit/architect';
+import { createCopyPlugin } from '@nrwl/web/src/utils/config';
 
 export function createWebpackConfig(
   workspaceRoot: string,
@@ -84,6 +81,19 @@ export function createWebpackConfig(
         ],
       }
     );
+
+    config.plugins.push(
+      createCopyPlugin([
+        {
+          input: 'public',
+          // distDir is `dist/apps/[name]/.next` and we want public to be copied
+          // to `dist/apps/[name]/public` thus the `..` here.
+          output: '../public',
+          glob: '**/*',
+        },
+      ])
+    );
+
     return config;
   };
 }

packages/web/src/utils/config.ts

@@ -6,11 +6,11 @@ import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import * as TerserWebpackPlugin from 'terser-webpack-plugin';
 import TsConfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
-import { BuildBuilderOptions } from './types';
-import CircularDependencyPlugin = require('circular-dependency-plugin');
-import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+import { AssetGlobPattern, BuildBuilderOptions } from './types';
 import { getOutputHashFormat } from './hash-format';
 import { createBabelConfig } from './babel-config';
+import CircularDependencyPlugin = require('circular-dependency-plugin');
+import ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const IGNORED_WEBPACK_WARNINGS = [
   /The comment file/i,
@@ -120,30 +120,8 @@ export function getBaseWebpackPartial(
     );
   }
 
-  // process asset entries
   if (options.assets) {
-    const copyWebpackPluginPatterns = options.assets.map((asset: any) => {
-      return {
-        context: asset.input,
-        // Now we remove starting slash to make Webpack place it from the output root.
-        to: asset.output,
-        ignore: asset.ignore,
-        from: {
-          glob: asset.glob,
-          dot: true,
-        },
-      };
-    });
-
-    const copyWebpackPluginOptions = {
-      ignore: ['.gitkeep', '**/.DS_Store', '**/Thumbs.db'],
-    };
-
-    const copyWebpackPluginInstance = new CopyWebpackPlugin(
-      copyWebpackPluginPatterns,
-      copyWebpackPluginOptions
-    );
-    extraPlugins.push(copyWebpackPluginInstance);
+    extraPlugins.push(createCopyPlugin(options.assets));
   }
 
   if (options.showCircularDependencies) {
@@ -240,3 +218,23 @@ function getClientEnvironment(mode) {
 
   return { stringified };
 }
+
+export function createCopyPlugin(assets: AssetGlobPattern[]) {
+  return new CopyWebpackPlugin(
+    assets.map((asset) => {
+      return {
+        context: asset.input,
+        // Now we remove starting slash to make Webpack place it from the output root.
+        to: asset.output,
+        ignore: asset.ignore,
+        from: {
+          glob: asset.glob,
+          dot: true,
+        },
+      };
+    }),
+    {
+      ignore: ['.gitkeep', '**/.DS_Store', '**/Thumbs.db'],
+    }
+  );
+}

packages/web/src/utils/types.ts

@@ -1,5 +1,5 @@
 import { FileReplacement } from './normalize';
-import { Path } from '@angular-devkit/core';
+import { JsonObject, Path } from '@angular-devkit/core';
 
 export interface OptimizationOptions {
   scripts: boolean;
@@ -58,3 +58,10 @@ export interface PackageBuilderOptions {
   watch?: boolean;
   assets?: any[];
 }
+
+export interface AssetGlobPattern extends JsonObject {
+  glob: string;
+  input: string;
+  output: string;
+  ignore?: string[];
+}

tsconfig.json

@@ -19,7 +19,9 @@
       "@nrwl/workspace/*": ["./packages/workspace/*"],
       "@nrwl/workspace/testing": ["./packages/workspace/testing"],
       "@nrwl/react": ["./packages/react"],
-      "@nrwl/react/*": ["./packages/react/*"]
+      "@nrwl/react/*": ["./packages/react/*"],
+      "@nrwl/web": ["./packages/web"],
+      "@nrwl/web/*": ["./packages/web/*"]
     }
   },
   "exclude": [