Add handling for default as named export in SSG transform

packages/next/build/babel/plugins/next-ssg-transform.ts

@@ -57,6 +57,33 @@ function decorateSsgExport(
       ])
       path.scope.registerDeclaration(pageCompPath)
     },
+    ExportNamedDeclaration(path) {
+      if (state.done) {
+        return
+      }
+      // we need to handle the default export being a named export
+      // for `export default class Page extends Component {}` syntax
+      const defaultSpecifier = path.node.specifiers.find(s => {
+        return s.exported.name === 'default'
+      })
+
+      if (!defaultSpecifier) {
+        return
+      }
+      state.done = true
+
+      path.replaceWithMultiple([
+        t.assignmentExpression(
+          '=',
+          t.memberExpression(
+            t.identifier((defaultSpecifier as any).local.name),
+            t.identifier(state.isPrerender ? prerenderId : serverPropsId)
+          ),
+          t.booleanLiteral(true)
+        ),
+        path.node,
+      ])
+    },
   })
 }
 

test/integration/prerender/pages/blog/[post]/[comment].js

@@ -23,20 +23,27 @@ export async function unstable_getStaticProps({ params }) {
   }
 }
 
-export default ({ post, comment, time }) => {
-  // we're in a loading state
-  if (!post) {
-    return <p>loading...</p>
-  }
+// Do not change this, it is making sure our SSG transform handles
+// export default in this way with a class component
+class Page extends React.Component {
+  render() {
+    const { post, comment, time } = this.props
+    // we're in a loading state
+    if (!post) {
+      return <p>loading...</p>
+    }
 
-  return (
-    <>
-      <p>Post: {post}</p>
-      <p>Comment: {comment}</p>
-      <span>time: {time}</span>
-      <Link href="/">
-        <a id="home">to home</a>
-      </Link>
-    </>
-  )
+    return (
+      <>
+        <p>Post: {post}</p>
+        <p>Comment: {comment}</p>
+        <span>time: {time}</span>
+        <Link href="/">
+          <a id="home">to home</a>
+        </Link>
+      </>
+    )
+  }
 }
+
+export default Page

test/integration/prerender/pages/blog/[post]/index.js

@@ -38,16 +38,25 @@ export async function unstable_getStaticProps({ params }) {
   }
 }
 
-export default ({ post, time, params }) => {
-  return (
-    <>
-      <p>Post: {post}</p>
-      <span>time: {time}</span>
-      <div id="params">{JSON.stringify(params)}</div>
-      <div id="query">{JSON.stringify(useRouter().query)}</div>
-      <Link href="/">
-        <a id="home">to home</a>
-      </Link>
-    </>
-  )
+function Query() {
+  return <div id="query">{JSON.stringify(useRouter().query)}</div>
+}
+
+// Do not change this, it is making sure our SSG transform handles
+// export default in this way with a class component
+export default class Page extends React.Component {
+  render() {
+    const { post, time, params } = this.props
+    return (
+      <>
+        <p>Post: {post}</p>
+        <span>time: {time}</span>
+        <div id="params">{JSON.stringify(params)}</div>
+        <Query />
+        <Link href="/">
+          <a id="home">to home</a>
+        </Link>
+      </>
+    )
+  }
 }