[WIP]Next JS 14 Upgrade

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx", "eslint-comments", "promise", "unicorn", "license-header"],
+  "plugins": ["@nx", "eslint-comments", "promise", "unicorn", "license-header"],
   "extends": [
     "plugin:@next/next/recommended",
     "airbnb",
@@ -22,7 +22,7 @@
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -99,15 +99,15 @@
         "eslint-comments/no-unlimited-disable": "off",
         "unicorn/no-null": "off",
         "unicorn/prefer-module": "off",
-        "license-header/header": [ "error", "./license-header.js" ],
+        "license-header/header": ["error", "./license-header.js"],
         "unicorn/prefer-top-level-await": "off"
       }
     },
     {
       "files": ["*.ts", "*.tsx"],
       "plugins": ["@typescript-eslint", "typescript-enum"],
       "extends": [
-        "plugin:@nrwl/nx/typescript",
+        "plugin:@nx/typescript",
         "airbnb-typescript",
         "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
@@ -162,7 +162,7 @@
     },
     {
       "files": ["*.js", "*.jsx", "*.mjs"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {
         // Allow CJS until ESM support improves
         "unicorn/prefer-module": "off",

.gitignore

@@ -48,4 +48,5 @@ Thumbs.db
 
 .odo/env
 .odo/odo-file-index.json
-.odo
+.odo
+.nx/cache

.prettierignore

@@ -11,3 +11,5 @@
 **/*/__ENV.js
 libs/core/src/types/devfile-spec.ts
 .yarn/
+
+/.nx/cache

apps/landing-page-e2e/cypress.config.ts

@@ -15,7 +15,7 @@
  */
 
 import { defineConfig } from 'cypress';
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 export default defineConfig({
   e2e: nxE2EPreset(__dirname),

apps/landing-page-e2e/project.json

@@ -1,10 +1,13 @@
 {
+  "name": "landing-page-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/landing-page-e2e/src",
   "projectType": "application",
+  "tags": [],
+  "implicitDependencies": ["landing-page"],
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "dependsOn": ["^build"],
       "options": {
         "cypressConfig": "apps/landing-page-e2e/cypress.config.ts",
@@ -18,13 +21,11 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/landing-page-e2e/**/*.{js,ts}"]
       }
     }
-  },
-  "tags": [],
-  "implicitDependencies": ["landing-page"]
+  }
 }

apps/landing-page-e2e/tsconfig.json

@@ -1,10 +1,10 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": [ "../../tsconfig.base.json" ],
   "compilerOptions": {
     "sourceMap": false,
     "outDir": "../../dist/out-tsc",
     "allowJs": true,
     "types": ["cypress", "node"]
   },
-  "include": ["src/**/*.ts", "src/**/*.js"]
+  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
 }

apps/landing-page/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "plugin:@nrwl/nx/react-typescript",
+    "plugin:@nx/react-typescript",
     "../../.eslintrc.json",
     "next",
     "next/core-web-vitals"

apps/landing-page/jest.config.ts

@@ -23,8 +23,8 @@ export default {
   testEnvironment: 'jsdom',
 
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
 
   moduleNameMapper: {

apps/landing-page/next.config.js

@@ -15,7 +15,7 @@
  */
 
 const path = require('node:path');
-const withNx = require('@nrwl/next/plugins/with-nx');
+const withNx = require('@nx/next/plugins/with-nx');
 const withMarkdoc = require('@markdoc/next.js');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
@@ -26,7 +26,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
 
 /**
- * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  * */
 const nextConfig = {
   basePath,
@@ -41,11 +41,12 @@ const nextConfig = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
+  transpilePackages: ['@devfile-web/core', '@devfile-web/docs'],
   nx: {
     svgr: false,
   },
 };
 
-const plugins = [withBundleAnalyzer, withMarkdoc(), withNx];
+const plugins = [withBundleAnalyzer, withMarkdoc(), withNx.withNx];
 
 module.exports = plugins.reduce((config, plugin) => plugin(config), nextConfig);

apps/landing-page/project.json

@@ -1,7 +1,10 @@
 {
+  "name": "landing-page",
   "$schema": "..\\..\\node_modules\\nx\\schemas\\project-schema.json",
   "sourceRoot": "apps/landing-page",
   "projectType": "application",
+  "tags": [],
+  "implicitDependencies": ["docs"],
   "targets": {
     "prebuild": {
       "executor": "nx:run-commands",
@@ -11,7 +14,7 @@
       }
     },
     "build": {
-      "executor": "@nrwl/next:build",
+      "executor": "@nx/next:build",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "dependsOn": ["prebuild"],
@@ -27,7 +30,7 @@
       }
     },
     "serve": {
-      "executor": "@nrwl/next:server",
+      "executor": "@nx/next:server",
       "defaultConfiguration": "development",
       "dependsOn": ["prebuild"],
       "options": {
@@ -46,7 +49,7 @@
       }
     },
     "export": {
-      "executor": "@nrwl/next:export",
+      "executor": "@nx/next:export",
       "dependsOn": ["build"],
       "options": {
         "buildTarget": "landing-page:build:production"
@@ -74,21 +77,19 @@
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/landing-page"],
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/apps/landing-page"],
       "options": {
         "jestConfig": "apps/landing-page/jest.config.ts",
         "passWithNoTests": true
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/landing-page/**/*.{ts,tsx,js,jsx}"]
       }
     }
-  },
-  "tags": [],
-  "implicitDependencies": ["docs"]
+  }
 }

apps/landing-page/tailwind.config.js

@@ -16,7 +16,7 @@
 
 /* eslint-disable global-require */
 const defaultTheme = require('tailwindcss/defaultTheme');
-const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
 const { join } = require('node:path');
 
 /** @type {import('tailwindcss').Config} */

apps/landing-page/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": [ "../../tsconfig.base.json" ],
   "compilerOptions": {
     "jsx": "preserve",
     "allowJs": true,

apps/landing-page/tsconfig.spec.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.json",
+  "extends": [ "./tsconfig.json" ],
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",

apps/registry-viewer-e2e/cypress.config.ts

@@ -15,7 +15,7 @@
  */
 
 import { defineConfig } from 'cypress';
-import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
 export default defineConfig({
   e2e: nxE2EPreset(__dirname),

apps/registry-viewer-e2e/project.json

@@ -1,10 +1,13 @@
 {
+  "name": "registry-viewer-e2e",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/registry-viewer-e2e/src",
   "projectType": "application",
+  "tags": [],
+  "implicitDependencies": ["registry-viewer"],
   "targets": {
     "e2e": {
-      "executor": "@nrwl/cypress:cypress",
+      "executor": "@nx/cypress:cypress",
       "dependsOn": ["^build"],
       "options": {
         "cypressConfig": "apps/registry-viewer-e2e/cypress.config.ts",
@@ -18,13 +21,11 @@
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/registry-viewer-e2e/**/*.{js,ts}"]
       }
     }
-  },
-  "tags": [],
-  "implicitDependencies": ["registry-viewer"]
+  }
 }

apps/registry-viewer-e2e/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": [ "../../tsconfig.base.json" ],
   "compilerOptions": {
     "sourceMap": false,
     "outDir": "../../dist/out-tsc",

apps/registry-viewer/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": [
-    "plugin:@nrwl/nx/react-typescript",
+    "plugin:@nx/react-typescript",
     "next",
     "next/core-web-vitals",
     "../../.eslintrc.json"

apps/registry-viewer/jest.config.ts

@@ -19,8 +19,8 @@ export default {
   displayName: 'registry-viewer',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/registry-viewer',

apps/registry-viewer/next.config.js

@@ -15,7 +15,7 @@
  */
 
 const path = require('node:path');
-const withNx = require('@nrwl/next/plugins/with-nx');
+const withNx = require('@nx/next/plugins/with-nx');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
@@ -25,7 +25,7 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH;
 
 /**
- * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  * */
 const nextConfig = {
   basePath,
@@ -40,11 +40,12 @@ const nextConfig = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
+  transpilePackages: ['@devfile-web/core'],
   nx: {
     svgr: false,
   },
 };
 
-const plugins = [withBundleAnalyzer, withNx];
+const plugins = [withBundleAnalyzer, withNx.withNx];
 
 module.exports = plugins.reduce((config, plugin) => plugin(config), nextConfig);