Use Relative-CI to detect size changes in the Next.js integration tes…

…t build. (#225)

* add `webpack-stats-plugin`

* add github workflow

.github/workflows/relative-ci.yaml

@@ -0,0 +1,17 @@
+name: RelativeCI
+
+on:
+  workflow_run:
+    workflows: ["Run tests"]
+    types:
+      - completed
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send bundle stats and build information to RelativeCI
+        uses: relative-ci/agent-action@v2
+        with:
+          key: ${{ secrets.RELATIVE_CI_KEY }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/tests.yml

@@ -99,6 +99,13 @@ jobs:
 
       - name: "Next.js: Build"
         run: yarn workspace @integration-test/nextjs run build
+      # Upload webpack-stats.json to use on relative-ci.yaml workflow
+      - name: Upload webpack stats artifact
+        if: matrix.version == 'latest'
+        uses: relative-ci/agent-upload-artifact-action@v1
+        with:
+          webpackStatsFile: ./integration-test/nextjs/webpack-stats.json
+
       - name: "Next.js: Test"
         run: yarn workspace @integration-test/nextjs run test | tee $GITHUB_STEP_SUMMARY; exit ${PIPESTATUS[0]}
 

integration-test/.gitignore

@@ -15,3 +15,4 @@ yalc.lock
 .vercel
 .next/
 test-results/
+webpack-stats.json

integration-test/.yarnrc.yml

@@ -5,4 +5,5 @@ npmAuthToken: "${NODE_AUTH_TOKEN-}"
 yarnPath: ../.yarn/releases/yarn-4.1.0.cjs
 cacheFolder: "../.yarn/cache"
 installStatePath: "./.yarn/integration-test-install-state.gz"
-enableInlineBuilds: true
+enableInlineBuilds: true
+checksumBehavior: ignore

integration-test/nextjs/next.config.js

@@ -1,4 +1,25 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
 
-module.exports = nextConfig;
+module.exports = {
+  webpack: (config, options) => {
+    const { dev, isServer } = options;
+
+    // Output webpack stats JSON file only for
+    // client-side/production build
+    if (!dev && !isServer) {
+      config.plugins.push(
+        new StatsWriterPlugin({
+          filename: "../webpack-stats.json",
+          stats: {
+            assets: true,
+            chunks: true,
+            modules: true,
+            excludeAssets: [/webpack-stats.json/],
+          },
+        })
+      );
+    }
+
+    return config;
+  },
+};

integration-test/nextjs/package.json

@@ -27,6 +27,7 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@playwright/test": "^1.39.0"
+    "@playwright/test": "^1.39.0",
+    "webpack-stats-plugin": "^1.1.3"
   }
 }

integration-test/package.json

@@ -7,5 +7,11 @@
   },
   "workspaces": [
     "*"
-  ]
+  ],
+  "scripts": {
+    "trigger-rebuild": "find . -regextype posix-extended -regex '.*/node_modules/@apollo/(client-react-streaming|experimental-nextjs-app-support)' -printf 'rm -r %p\n' -exec rm -r {} +; glob \"../.yarn/cache/@apollo-*exec*\" \"$HOME/.yarn/berry/cache/@apollo-*exec*\" --cmd='rm -v' ; yarn"
+  },
+  "devDependencies": {
+    "glob": "^10.3.10"
+  }
 }

integration-test/yarn.lock

@@ -2042,12 +2042,15 @@ __metadata:
     react-dom: "npm:18.2.0"
     ssr-only-secrets: "npm:^0.0.5"
     typescript: "npm:5.1.3"
+    webpack-stats-plugin: "npm:^1.1.3"
   languageName: unknown
   linkType: soft
 
 "@integration-test/root@workspace:.":
   version: 0.0.0-use.local
   resolution: "@integration-test/root@workspace:."
+  dependencies:
+    glob: "npm:^10.3.10"
   languageName: unknown
   linkType: soft
 
@@ -8491,6 +8494,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-stats-plugin@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "webpack-stats-plugin@npm:1.1.3"
+  checksum: 10/31cf10e0ee4ffe72a876785248805b5bd4ae68eb1fa546a0b3cd3c9f651054eb119903cc021829bef6e50f9108639bd2b985cbbfe3b72ca916650733c1840e5a
+  languageName: node
+  linkType: hard
+
 "whatwg-encoding@npm:^2.0.0":
   version: 2.0.0
   resolution: "whatwg-encoding@npm:2.0.0"