fix(nextjs): Next 11.1.0 compatibility (#6699)

Co-authored-by: Kirils L <9858620+kirjai@users.noreply.github.com>
nrwl · Aug 17, 2021 · 6bf60fd · 6bf60fd
1 parent 2239c0e
commit 6bf60fd
Show file tree

Hide file tree

Showing 15 changed files with 166 additions and 97 deletions.
diff --git a/nx-dev/nx-dev/next-env.d.ts b/nx-dev/nx-dev/next-env.d.ts
@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
diff --git a/package.json b/package.json
@@ -133,7 +133,7 @@
     "dotenv": "~10.0.0",
     "ejs": "^3.1.5",
     "eslint": "7.10.0",
-    "eslint-config-next": "^11.0.1",
+    "eslint-config-next": "^11.1.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-import": "2.22.1",
@@ -177,7 +177,7 @@
     "mime": "2.4.4",
     "mini-css-extract-plugin": "0.8.0",
     "minimatch": "3.0.4",
-    "next": "10.2.0",
+    "next": "11.0.1",
     "next-sitemap": "^1.6.108",
     "ng-packagr": "~12.1.0",
     "ngrx-store-freeze": "0.2.4",

diff --git a/packages/next/migrations.json b/packages/next/migrations.json
@@ -138,6 +138,19 @@
           "addToPackageJson": "devDependencies"
         }
       }
+    },
+    "update-12.7.2": {
+      "version": "12.7.2-beta.0",
+      "packages": {
+        "next": {
+          "version": "11.1.0",
+          "alwaysAddToPackageJson": false
+        },
+        "eslint-config-next": {
+          "version": "11.1.0",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -29,7 +29,7 @@
     "migrations": "./migrations.json"
   },
   "peerDependencies": {
-    "next": "^11.0.1"
+    "next": "^11.1.0"
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.14.5",
@@ -42,7 +42,7 @@
     "@nrwl/workspace": "*",
     "@svgr/webpack": "^5.5.0",
     "chalk": "4.1.0",
-    "eslint-config-next": "^11.0.1",
+    "eslint-config-next": "^11.1.0",
     "fs-extra": "^9.1.0",
     "url-loader": "^3.0.0",
     "tsconfig-paths": "^3.9.0",

diff --git a/packages/next/plugins/with-nx.ts b/packages/next/plugins/with-nx.ts
@@ -1,3 +1,5 @@
+// ignoring while we support both Next 11.1.0 and versions before it
+// @ts-ignore
 import type { NextConfig } from 'next/dist/next-server/server/config';
 import { WebpackConfigOptions } from '../src/utils/types';
 

diff --git a/packages/next/src/executors/build/build.impl.ts b/packages/next/src/executors/build/build.impl.ts
@@ -2,7 +2,6 @@ import 'dotenv/config';
 import { ExecutorContext } from '@nrwl/devkit';
 
 import build from 'next/dist/build';
-import { PHASE_PRODUCTION_BUILD } from 'next/dist/next-server/lib/constants';
 
 import { join, resolve } from 'path';
 import { copySync, mkdir } from 'fs-extra';
@@ -19,6 +18,9 @@ import {
 } from '@nrwl/workspace/src/utilities/buildable-libs-utils';
 import { assertDependentProjectsHaveBeenBuilt } from '../../utils/buildable-libs';
 import { checkPublicDirectory } from './lib/check-project';
+import { importConstants } from '../../utils/require-shim';
+
+const { PHASE_PRODUCTION_BUILD } = importConstants();
 
 export default async function buildExecutor(
   options: NextBuildBuilderOptions,

diff --git a/packages/next/src/executors/export/export.impl.ts b/packages/next/src/executors/export/export.impl.ts
@@ -6,7 +6,6 @@ import {
   runExecutor,
 } from '@nrwl/devkit';
 import exportApp from 'next/dist/export';
-import { PHASE_EXPORT } from 'next/dist/next-server/lib/constants';
 import { resolve } from 'path';
 import { prepareConfig } from '../../utils/config';
 import {
@@ -19,6 +18,9 @@ import {
   DependentBuildableProjectNode,
 } from '@nrwl/workspace/src/utilities/buildable-libs-utils';
 import { assertDependentProjectsHaveBeenBuilt } from '../../utils/buildable-libs';
+import { importConstants } from '../../utils/require-shim';
+
+const { PHASE_EXPORT } = importConstants();
 
 export default async function exportExecutor(
   options: NextExportBuilderOptions,

diff --git a/packages/next/src/executors/server/server.impl.ts b/packages/next/src/executors/server/server.impl.ts
@@ -5,10 +5,6 @@ import {
   parseTargetString,
   readTargetOptions,
 } from '@nrwl/devkit';
-import {
-  PHASE_DEVELOPMENT_SERVER,
-  PHASE_PRODUCTION_SERVER,
-} from 'next/dist/next-server/lib/constants';
 
 import * as chalk from 'chalk';
 import { existsSync } from 'fs';
@@ -30,6 +26,9 @@ import {
   DependentBuildableProjectNode,
 } from '@nrwl/workspace/src/utilities/buildable-libs-utils';
 import { assertDependentProjectsHaveBeenBuilt } from '../../utils/buildable-libs';
+import { importConstants } from '../../utils/require-shim';
+
+const { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_SERVER } = importConstants();
 
 const infoPrefix = `[ ${chalk.dim(chalk.cyan('info'))} ] `;
 const readyPrefix = `[ ${chalk.green('ready')} ]`;

diff --git a/packages/next/src/generators/application/lib/create-next-server-files.ts b/packages/next/src/generators/application/lib/create-next-server-files.ts
@@ -2,6 +2,15 @@ import { NormalizedSchema } from './normalize-options';
 import { getWorkspaceLayout, joinPathFragments, Tree } from '@nrwl/devkit';
 import { dirname } from 'path';
 
+let isOldNext: boolean;
+
+try {
+  require('next/dist/next-server/server/next-server');
+  isOldNext = true;
+} catch {
+  isOldNext = false;
+}
+
 export function createNextServerFiles(host: Tree, options: NormalizedSchema) {
   if (options.server) {
     const directory = dirname(
@@ -67,10 +76,18 @@ export function createNextServerFiles(host: Tree, options: NormalizedSchema) {
        */
 
       /**
-       * @typedef {import('next/dist/next-server/server/next-server').default} Server
+       * @typedef {import(${
+         isOldNext
+           ? 'next/dist/next-server/server/next-server'
+           : 'next/dist/server/next-server'
+       }).default} Server
        */
 
-      const NextServer = require('next/dist/next-server/server/next-server').default;
+      const NextServer = require(${
+        isOldNext
+          ? 'next/dist/next-server/server/next-server'
+          : 'next/dist/server/next-server'
+      }).default;
       const express = require('express');
 
       const nextApp = new NextServer({

diff --git a/packages/next/src/migrations/update-9-2-0/create-next-config.ts b/packages/next/src/migrations/update-9-2-0/create-next-config.ts
@@ -1,7 +1,8 @@
 import { chain, Rule, Tree } from '@angular-devkit/schematics';
 import { formatFiles, readWorkspace } from '@nrwl/workspace';
-import { CONFIG_FILE } from 'next/dist/next-server/lib/constants';
 import { join } from 'path';
+import { importConstants } from '../../utils/require-shim';
+const { CONFIG_FILE } = importConstants();
 
 const defaultConfig = `const withSass = require('@zeit/next-sass');
 const withLess = require('@zeit/next-less');

diff --git a/packages/next/src/utils/config.spec.ts b/packages/next/src/utils/config.spec.ts
@@ -1,8 +1,9 @@
-import { PHASE_PRODUCTION_BUILD } from 'next/dist/next-server/lib/constants';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import { createWebpackConfig, prepareConfig } from './config';
 import { NextBuildBuilderOptions } from '@nrwl/next';
 import { dirname } from 'path';
+import { importConstants } from './require-shim';
+const { PHASE_PRODUCTION_BUILD } = importConstants();
 
 jest.mock('tsconfig-paths-webpack-plugin');
 jest.mock('next/dist/next-server/server/config', () => ({

diff --git a/packages/next/src/utils/config.ts b/packages/next/src/utils/config.ts
@@ -1,12 +1,14 @@
 import { ExecutorContext, offsetFromRoot } from '@nrwl/devkit';
-import {
+// ignoring while we support both Next 11.1.0 and versions before it
+// @ts-ignore
+import type { NextConfig } from 'next/dist/server/config-shared';
+// @ts-ignore
+import type {
   PHASE_DEVELOPMENT_SERVER,
   PHASE_EXPORT,
   PHASE_PRODUCTION_BUILD,
   PHASE_PRODUCTION_SERVER,
 } from 'next/dist/next-server/lib/constants';
-import loadConfig from 'next/dist/next-server/server/config';
-import { NextConfig } from 'next/dist/next-server/server/config-shared';
 import { join, resolve } from 'path';
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
 import { Configuration } from 'webpack';
@@ -19,10 +21,11 @@ import { normalizeAssets } from '@nrwl/web/src/utils/normalize';
 import { createCopyPlugin } from '@nrwl/web/src/utils/config';
 import { WithNxOptions } from '../../plugins/with-nx';
 import {
-  computeCompilerOptionsPaths,
   createTmpTsConfig,
   DependentBuildableProjectNode,
 } from '@nrwl/workspace/src/utilities/buildable-libs-utils';
+import { importConfig } from './require-shim';
+const loadConfig = importConfig();
 
 export function createWebpackConfig(
   workspaceRoot: string,

diff --git a/packages/next/src/utils/require-shim.ts b/packages/next/src/utils/require-shim.ts
@@ -0,0 +1,15 @@
+export function importConstants() {
+  try {
+    return require('next/dist/next-server/lib/constants');
+  } catch {
+    return require('next/dist/shared/lib/constants');
+  }
+}
+
+export function importConfig() {
+  try {
+    return require('next/dist/next-server/server/config').default;
+  } catch {
+    return require('next/dist/server/config').default;
+  }
+}
diff --git a/packages/next/src/utils/versions.ts b/packages/next/src/utils/versions.ts
@@ -1,7 +1,7 @@
 export const nxVersion = '*';
 
-export const nextVersion = '11.0.1';
-export const eslintConfigNextVersion = '11.0.1';
+export const nextVersion = '11.1.0';
+export const eslintConfigNextVersion = '11.1.0';
 export const nodeSass = '5.0.0';
 export const zeitNextLess = '1.0.1';
 export const zeitNextStylus = '1.0.1';