Refine Pages Output (#9725)

packages/next/build/index.ts

@@ -8,8 +8,8 @@ import nanoid from 'next/dist/compiled/nanoid/index.js'
 import path from 'path'
 import { pathToRegexp } from 'path-to-regexp'
 import { promisify } from 'util'
-
 import formatWebpackMessages from '../client/dev/error-overlay/format-webpack-messages'
+import checkCustomRoutes from '../lib/check-custom-routes'
 import { PUBLIC_DIR_MIDDLEWARE_CONFLICT } from '../lib/constants'
 import { findPagesDir } from '../lib/find-pages-dir'
 import { recursiveDelete } from '../lib/recursive-delete'
@@ -22,8 +22,8 @@ import {
   PHASE_PRODUCTION_BUILD,
   PRERENDER_MANIFEST,
   ROUTES_MANIFEST,
-  SERVER_DIRECTORY,
   SERVERLESS_DIRECTORY,
+  SERVER_DIRECTORY,
 } from '../next-server/lib/constants'
 import {
   getRouteRegex,
@@ -55,7 +55,6 @@ import {
 } from './utils'
 import getBaseWebpackConfig from './webpack-config'
 import { writeBuildId } from './write-build-id'
-import checkCustomRoutes from '../lib/check-custom-routes'
 
 const fsAccess = promisify(fs.access)
 const fsUnlink = promisify(fs.unlink)
@@ -722,7 +721,15 @@ export default async function build(dir: string, conf = null): Promise<void> {
     allPageInfos.set(key, info)
   })
 
-  printTreeView(Object.keys(mappedPages), allPageInfos, isLikeServerless)
+  await printTreeView(
+    Object.keys(mappedPages),
+    allPageInfos,
+    isLikeServerless,
+    {
+      pagesDir,
+      pageExtensions: config.pageExtensions,
+    }
+  )
   printCustomRoutes({ redirects, rewrites })
 
   if (tracer) {

packages/next/build/utils.ts

@@ -5,14 +5,14 @@ import path from 'path'
 import { isValidElementType } from 'react-is'
 import stripAnsi from 'strip-ansi'
 import { promisify } from 'util'
-
+import { Redirect, Rewrite } from '../lib/check-custom-routes'
 import { SPR_GET_INITIAL_PROPS_CONFLICT } from '../lib/constants'
 import prettyBytes from '../lib/pretty-bytes'
 import { recursiveReadDir } from '../lib/recursive-readdir'
+import { DEFAULT_REDIRECT_STATUS } from '../next-server/lib/constants'
 import { getRouteMatcher, getRouteRegex } from '../next-server/lib/router/utils'
 import { isDynamicRoute } from '../next-server/lib/router/utils/is-dynamic'
-import { Redirect, Rewrite } from '../lib/check-custom-routes'
-import { DEFAULT_REDIRECT_STATUS } from '../next-server/lib/constants'
+import { findPageFile } from '../server/lib/find-page-file'
 
 const fsStatPromise = promisify(fs.stat)
 const fileStats: { [k: string]: Promise<fs.Stats> } = {}
@@ -43,10 +43,11 @@ export interface PageInfo {
   serverBundle: string
 }
 
-export function printTreeView(
-  list: string[],
+export async function printTreeView(
+  list: readonly string[],
   pageInfos: Map<string, PageInfo>,
-  serverless: boolean
+  serverless: boolean,
+  { pagesDir, pageExtensions }: { pagesDir: string; pageExtensions: string[] }
 ) {
   const getPrettySize = (_size: number): string => {
     const size = prettyBytes(_size)
@@ -62,56 +63,69 @@ export function printTreeView(
     ['Page', 'Size'].map(entry => chalk.underline(entry)) as [string, string],
   ]
 
-  list
+  const hasCustomApp = await findPageFile(pagesDir, '/_app', pageExtensions)
+  const hasCustomError = await findPageFile(pagesDir, '/_error', pageExtensions)
+
+  const pageList = list
+    .slice()
+    .filter(
+      e =>
+        !(
+          e === '/_document' ||
+          (!hasCustomApp && e === '/_app') ||
+          (!hasCustomError && e === '/_error')
+        )
+    )
     .sort((a, b) => a.localeCompare(b))
-    .forEach((item, i) => {
-      const symbol =
-        i === 0
-          ? list.length === 1
-            ? '─'
-            : '┌'
-          : i === list.length - 1
-          ? '└'
-          : '├'
-
-      const pageInfo = pageInfos.get(item)
-
-      messages.push([
-        `${symbol} ${
-          item.startsWith('/_')
-            ? ' '
-            : pageInfo && pageInfo.static
-            ? '○'
-            : pageInfo && pageInfo.isSsg
-            ? '●'
-            : 'λ'
-        } ${item}`,
-        pageInfo
-          ? pageInfo.isAmp
-            ? chalk.cyan('AMP')
-            : pageInfo.size >= 0
-            ? getPrettySize(pageInfo.size)
-            : ''
-          : '',
-      ])
-
-      if (pageInfo && pageInfo.ssgPageRoutes && pageInfo.ssgPageRoutes.length) {
-        const totalRoutes = pageInfo.ssgPageRoutes.length
-        const previewPages = totalRoutes === 4 ? 4 : 3
-        const contSymbol = i === list.length - 1 ? ' ' : '├'
-
-        const routes = pageInfo.ssgPageRoutes.slice(0, previewPages)
-        if (totalRoutes > previewPages) {
-          const remaining = totalRoutes - previewPages
-          routes.push(`[+${remaining} more paths]`)
-        }
 
-        routes.forEach((slug, index, { length }) => {
-          const innerSymbol = index === length - 1 ? '└' : '├'
-          messages.push([`${contSymbol}   ${innerSymbol} ${slug}`, ''])
-        })
+  pageList.forEach((item, i, arr) => {
+    const symbol =
+      i === 0
+        ? arr.length === 1
+          ? '─'
+          : '┌'
+        : i === arr.length - 1
+        ? '└'
+        : '├'
+
+    const pageInfo = pageInfos.get(item)
+
+    messages.push([
+      `${symbol} ${
+        item.startsWith('/_')
+          ? ' '
+          : pageInfo && pageInfo.static
+          ? '○'
+          : pageInfo && pageInfo.isSsg
+          ? '●'
+          : 'λ'
+      } ${item}`,
+      pageInfo
+        ? pageInfo.isAmp
+          ? chalk.cyan('AMP')
+          : pageInfo.size >= 0
+          ? getPrettySize(pageInfo.size)
+          : ''
+        : '',
+    ])
+
+    if (pageInfo && pageInfo.ssgPageRoutes && pageInfo.ssgPageRoutes.length) {
+      const totalRoutes = pageInfo.ssgPageRoutes.length
+      const previewPages = totalRoutes === 4 ? 4 : 3
+      const contSymbol = i === arr.length - 1 ? ' ' : '├'
+
+      const routes = pageInfo.ssgPageRoutes.slice(0, previewPages)
+      if (totalRoutes > previewPages) {
+        const remaining = totalRoutes - previewPages
+        routes.push(`[+${remaining} more paths]`)
       }
-    })
+
+      routes.forEach((slug, index, { length }) => {
+        const innerSymbol = index === length - 1 ? '└' : '├'
+        messages.push([`${contSymbol}   ${innerSymbol} ${slug}`, ''])
+      })
+    }
+  })
 
   console.log(
     textTable(messages, {

test/integration/build-output/fixtures/basic-app/pages/index.js

@@ -0,0 +1,3 @@
+export default function() {
+  return <div />
+}

test/integration/build-output/fixtures/with-app/pages/_app.js

@@ -0,0 +1,3 @@
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}

test/integration/build-output/fixtures/with-app/pages/index.js

@@ -0,0 +1,3 @@
+export default function() {
+  return <div />
+}

test/integration/build-output/fixtures/with-error/pages/_error.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+function Error({ statusCode }) {
+  return (
+    <p>
+      {statusCode
+        ? `An error ${statusCode} occurred on server`
+        : 'An error occurred on client'}
+    </p>
+  )
+}
+
+Error.getInitialProps = ({ res, err }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+  return { statusCode }
+}
+
+export default Error

test/integration/build-output/fixtures/with-error/pages/index.js

@@ -0,0 +1,3 @@
+export default function() {
+  return <div />
+}

test/integration/build-output/test/index.test.js

@@ -0,0 +1,72 @@
+/* eslint-env jest */
+/* global jasmine */
+import 'flat-map-polyfill'
+import { remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 2
+
+const fixturesDir = join(__dirname, '..', 'fixtures')
+
+describe('Build Output', () => {
+  describe('Basic Application Output', () => {
+    const appDir = join(fixturesDir, 'basic-app')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should not include internal pages', async () => {
+      const { stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+
+      expect(stdout).not.toContain('/_document')
+      expect(stdout).not.toContain('/_app')
+      expect(stdout).not.toContain('/_error')
+
+      expect(stdout).toContain('○ /')
+    })
+  })
+
+  describe('Custom App Output', () => {
+    const appDir = join(fixturesDir, 'with-app')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should not include internal pages', async () => {
+      const { stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+
+      expect(stdout).not.toContain('/_document')
+      expect(stdout).not.toContain('/_error')
+
+      expect(stdout).toContain('/_app')
+      expect(stdout).toContain('○ /')
+    })
+  })
+
+  describe('Custom Error Output', () => {
+    const appDir = join(fixturesDir, 'with-error')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should not include internal pages', async () => {
+      const { stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+
+      expect(stdout).not.toContain('/_document')
+      expect(stdout).not.toContain('/_app')
+
+      expect(stdout).toContain('/_error')
+      expect(stdout).toContain('○ /')
+    })
+  })
+})