Add page with next/image to stats-app

test/.stats-app/image.js

@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import logo from './nextjs.png'
+
+function ImagePage(props) {
+  return (
+    <>
+      <h1>next/image example</h1>
+      <Image src={logo} placeholder="blur" />
+    </>
+  )
+}
+
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
+
+export default ImagePage

test/.stats-app/pages/index.js

@@ -1,5 +1,11 @@
 const Page = () => 'Hello world 👋'
 
-Page.getInitialProps = () => ({})
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
 
 export default Page

test/.stats-app/pages/link.js

@@ -9,6 +9,12 @@ function aLink(props) {
   )
 }
 
-aLink.getInitialProps = () => ({})
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
 
 export default aLink

test/.stats-app/pages/routerDirect.js

@@ -5,6 +5,12 @@ function routerDirect(props) {
   return <div>I import the router directly</div>
 }
 
-routerDirect.getInitialProps = () => ({})
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
 
 export default routerDirect

test/.stats-app/pages/withRouter.js

@@ -4,6 +4,12 @@ function useWithRouter(props) {
   return <div>I use withRouter</div>
 }
 
-useWithRouter.getInitialProps = () => ({})
+// we add getServerSideProps to prevent static optimization
+// to allow us to compare server-side changes
+export const getServerSideProps = () => {
+  return {
+    props: {},
+  }
+}
 
 export default withRouter(useWithRouter)

test/.stats-app/stats-config.js

@@ -1,3 +1,12 @@
+const fs = require('fs')
+const path = require('path')
+// this page is conditionally added when not testing
+// in webpack 4 mode since it's not supported for webpack 4
+const imagePageData = fs.readFileSync(
+  path.join(__dirname, './image.js'),
+  'utf8'
+)
+
 const clientGlobs = [
   {
     name: 'Client Bundles (main, webpack, commons)',
@@ -12,11 +21,11 @@ const clientGlobs = [
   },
   {
     name: 'Client Pages',
-    globs: ['.next/static/*/pages/**/*', '.next/static/css/**/*'],
+    globs: ['.next/static/BUILD_ID/pages/**/*.js', '.next/static/css/**/*'],
   },
   {
     name: 'Client Build Manifests',
-    globs: ['.next/static/*/_buildManifest*'],
+    globs: ['.next/static/BUILD_ID/_buildManifest*'],
   },
   {
     name: 'Rendered Page Sizes',
@@ -26,19 +35,19 @@ const clientGlobs = [
 
 const renames = [
   {
-    srcGlob: '.next/static/*/pages',
+    srcGlob: '.next/static/chunks/pages',
     dest: '.next/static/BUILD_ID/pages',
   },
   {
-    srcGlob: '.next/static/*/pages/**/*',
+    srcGlob: '.next/static/BUILD_ID/pages/**/*.js',
     removeHash: true,
   },
   {
-    srcGlob: '.next/static/runtime/*',
+    srcGlob: '.next/static/runtime/*.js',
     removeHash: true,
   },
   {
-    srcGlob: '.next/static/chunks/*',
+    srcGlob: '.next/static/chunks/*.js',
     removeHash: true,
   },
   {
@@ -60,6 +69,10 @@ module.exports = {
       title: 'Default Build',
       diff: 'onOutputChange',
       diffConfigFiles: [
+        {
+          path: 'pages/image.js',
+          content: imagePageData,
+        },
         {
           path: 'next.config.js',
           content: `
@@ -77,6 +90,10 @@ module.exports = {
       // renames to apply to make file names deterministic
       renames,
       configFiles: [
+        {
+          path: 'pages/image.js',
+          content: imagePageData,
+        },
         {
           path: 'next.config.js',
           content: `