[Next.js] Exclude ComponentProps functions from the client bundle

CHANGELOG.md

@@ -49,6 +49,12 @@ Our versioning strategy is as follows:
 * Upgrade to Node.js 20.x ([#1679](https://github.com/Sitecore/jss/pull/1679))([#1681](https://github.com/Sitecore/jss/pull/1681))
 * `[nextjs/template]` Upgrade graphql-codegen packages to latest ([#1711](https://github.com/Sitecore/jss/pull/1711))
 
+## 21.6.4
+
+### 🐛 Bug Fixes
+
+* `[templates/nextjs]` Exclude ComponentProps functions from the client bundle ([#1753](https://github.com/Sitecore/jss/pull/1753))
+
 ## 21.6.3
 
 ### 🐛 Bug Fixes

packages/create-sitecore-jss/src/templates/nextjs/package.json

@@ -34,6 +34,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@babel/parser": "^7.24.0",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/plugin-helpers": "^5.0.1",
@@ -63,6 +64,7 @@
     "graphql-let": "^0.18.6",
     "npm-run-all": "~4.1.5",
     "prettier": "^2.8.3",
+    "recast": "^0.23.4",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.2",
     "typescript": "~4.9.4",

packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/component-props.loader.js

@@ -0,0 +1,50 @@
+const recast = require('recast');
+
+/**
+ * Webpack loader to strip functions from the source code
+ * @param {string} source file source code
+ * @returns {string} output file source code with stripped functions
+ */
+module.exports = function (source) {
+  // Parse the source code into an AST (Abstract Syntax Tree)
+  const ast = recast.parse(source, {
+    parser: require('recast/parsers/babel-ts'),
+  });
+
+  // List of functions to strip from the AST
+  const functionsToStrip = ['getServerSideProps', 'getStaticProps'];
+
+  function traverseAst(path) {
+    if (path.node.declaration.declarations) {
+      path.node.declaration.declarations.forEach((declaration) => {
+        // Check if the function is in the list of functions to strip
+        if (functionsToStrip.includes(declaration.id.name)) {
+          // Strip the function from the AST
+          path.prune();
+
+          // Remove the function from the list of functions to strip
+          functionsToStrip.splice(functionsToStrip.indexOf(declaration.id.name), 1);
+        }
+      });
+    }
+
+    if (functionsToStrip.length === 0) {
+      // We have pruned all the functions we need to, so we can stop traversing the AST
+      return false;
+    }
+
+    // Continue traversing the AST
+    this.traverse(path);
+  }
+
+  // Traverse the AST and strip the functions
+  recast.visit(ast, {
+    // Visit the export named declaration
+    visitExportNamedDeclaration: traverseAst,
+  });
+
+  // Generate the output code
+  const output = recast.print(ast).code;
+
+  return output;
+};

packages/create-sitecore-jss/src/templates/nextjs/src/lib/next-config/plugins/component-props.js

@@ -0,0 +1,27 @@
+const path = require('path');
+
+/**
+ * @param {import('next').NextConfig} nextConfig
+ */
+const componentPropsPlugin = (nextConfig = {}) => {
+  return Object.assign({}, nextConfig, {
+    webpack: (config, options) => {
+      if (!options.isServer) {
+        // Add a loader to strip out getServerSideProps and getStaticProps from components in the client bundle
+        config.module.rules.unshift({
+          test: /src\\components\\.*\.tsx$/,
+          use: [path.resolve(process.cwd(), 'src/lib/next-config/component-props.loader.js')],
+        });
+      }
+
+      // Overload the Webpack config if it was already overloaded
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+
+      return config;
+    },
+  });
+};
+
+module.exports = componentPropsPlugin;