Merge branch 'canary' into add/tracing-improvements

Author: kodiakhq[bot]

docs/basic-features/eslint.md

@@ -95,6 +95,7 @@ Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/
 | ✔️  | [next/no-title-in-document-head](https://nextjs.org/docs/messages/no-title-in-document-head)   | Disallow using <title> with Head from next/document                                                                    |
 | ✔️  | [next/no-unwanted-polyfillio](https://nextjs.org/docs/messages/no-unwanted-polyfillio)         | Prevent duplicate polyfills from Polyfill.io                                                                                 |
 | ✔️  | next/no-typos                                                                                  | Ensure no typos were made declaring [Next.js's data fetching function](https://nextjs.org/docs/basic-features/data-fetching) |
+| ✔️  | [next/next-script-for-ga](https://nextjs.org/docs/messages/next-script-for-ga)                 | Use the Script component to defer loading of the script until necessary.                                                     |
 
 - ✔: Enabled in the recommended configuration
 

docs/testing.md

@@ -16,7 +16,7 @@ Cypress is a test runner used for **End-to-End (E2E)** and **Integration Testing
 
 ### Quickstart
 
-You can use `create-next-app` with the [with-cypress example](https://github.com/vercel/next.js/tree/canary/examples/with-jest) to quickly get started.
+You can use `create-next-app` with the [with-cypress example](https://github.com/vercel/next.js/tree/canary/examples/with-cypress) to quickly get started.
 
 ```bash
 npx create-next-app --example with-cypress with-cypress-app

errors/next-script-for-ga.md

@@ -0,0 +1,98 @@
+# Next Script for Google Analytics
+
+### Why This Error Occurred
+
+An inline script was used for Google analytics which might impact your webpage's performance.
+
+### Possible Ways to Fix It
+
+#### Using gtag.js
+
+If you are using the [gtag.js](https://developers.google.com/analytics/devguides/collection/gtagjs) script to add analytics, use the `next/script` component with the right loading strategy to defer loading of the script until necessary.
+
+```jsx
+import Script from 'next/script'
+
+const Home = () => {
+  return (
+    <div class="container">
+      <!-- Global site tag (gtag.js) - Google Analytics -->
+      <Script
+        src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
+        strategy="lazyOnload"
+      ></Script>
+      <Script>
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){window.dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', 'GA_MEASUREMENT_ID');
+        `}
+      </Script>
+    </div>
+  )
+}
+
+export default Home
+```
+
+#### Using analytics.js
+
+If you are using the [analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs) script to add analytics:
+
+```jsx
+import Script from 'next/script'
+
+const Home = () => {
+  return (
+    <div class="container">
+      <Script>
+        {`
+          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+          ga('create', 'UA-XXXXX-Y', 'auto');
+          ga('send', 'pageview');
+        `}
+      </Script>
+    </div>
+  )
+}
+
+export default Home
+```
+
+If you are using the [alternative async variant](https://developers.google.com/analytics/devguides/collection/analyticsjs#alternative_async_tag):
+
+```jsx
+import Script from 'next/script'
+
+const Home = () => {
+  return (
+    <div class="container">
+      <Script>
+        {`
+          window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+          ga('create', 'GOOGLE_ANALYTICS_ID', 'auto');
+          ga('send', 'pageview');
+        `}
+      </Script>
+      <Script
+        src="https://www.google-analytics.com/analytics.js"
+        strategy="lazyOnload"
+      ></Script>
+    </div>
+  )
+}
+
+export default Home
+```
+
+### Useful Links
+
+- [Add analytics.js to Your Site](https://developers.google.com/analytics/devguides/collection/analyticsjs)
+- [Efficiently load third-party JavaScript](https://web.dev/efficiently-load-third-party-javascript/)
+- [next/script Documentation](https://nextjs.org/docs/basic-features/script)

packages/eslint-plugin-next/lib/index.js

@@ -16,6 +16,7 @@ module.exports = {
     'no-script-in-head': require('./rules/no-script-in-head'),
     'no-typos': require('./rules/no-typos'),
     'no-duplicate-head': require('./rules/no-duplicate-head'),
+    'next-script-for-ga': require('./rules/next-script-for-ga'),
   },
   configs: {
     recommended: {
@@ -31,6 +32,7 @@ module.exports = {
         '@next/next/google-font-display': 1,
         '@next/next/google-font-preconnect': 1,
         '@next/next/link-passhref': 1,
+        '@next/next/next-script-for-ga': 1,
         '@next/next/no-document-import-in-page': 2,
         '@next/next/no-head-import-in-document': 2,
         '@next/next/no-script-in-document': 2,

packages/eslint-plugin-next/lib/rules/next-script-for-ga.js

@@ -0,0 +1,77 @@
+const NodeAttributes = require('../utils/node-attributes.js')
+
+const SUPPORTED_SRCS = [
+  'www.google-analytics.com/analytics.js',
+  'www.googletagmanager.com/gtag/js',
+]
+const SUPPORTED_HTML_CONTENT_URLS = [
+  'www.google-analytics.com/analytics.js',
+  'www.googletagmanager.com/gtm.js',
+]
+const ERROR_MSG =
+  'Use the `next/script` component for loading third party scripts. See: https://nextjs.org/docs/messages/next-script-for-ga.'
+
+// Check if one of the items in the list is a substring of the passed string
+const containsStr = (str, strList) => {
+  return strList.some((s) => str.includes(s))
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description:
+        'Prefer next script component when using the inline script for Google Analytics',
+      recommended: true,
+    },
+  },
+  create: function (context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.name !== 'script') {
+          return
+        }
+        if (node.attributes.length === 0) {
+          return
+        }
+        const attributes = new NodeAttributes(node)
+
+        // Check if the Alternative async tag is being used to add GA.
+        // https://developers.google.com/analytics/devguides/collection/analyticsjs#alternative_async_tag
+        // https://developers.google.com/analytics/devguides/collection/gtagjs
+        if (
+          typeof attributes.value('src') === 'string' &&
+          containsStr(attributes.value('src'), SUPPORTED_SRCS)
+        ) {
+          return context.report({
+            node,
+            message: ERROR_MSG,
+          })
+        }
+
+        // Check if inline script is being used to add GA.
+        // https://developers.google.com/analytics/devguides/collection/analyticsjs#the_google_analytics_tag
+        // https://developers.google.com/tag-manager/quickstart
+        if (
+          attributes.has('dangerouslySetInnerHTML') &&
+          attributes.value('dangerouslySetInnerHTML')[0]
+        ) {
+          const htmlContent =
+            attributes.value('dangerouslySetInnerHTML')[0].value.quasis &&
+            attributes.value('dangerouslySetInnerHTML')[0].value.quasis[0].value
+              .raw
+          if (
+            htmlContent &&
+            containsStr(htmlContent, SUPPORTED_HTML_CONTENT_URLS)
+          ) {
+            context.report({
+              node,
+              message: ERROR_MSG,
+            })
+          }
+        }
+      },
+    }
+  },
+}
+
+module.exports.schema = []

packages/eslint-plugin-next/lib/rules/no-document-import-in-page.js

@@ -16,9 +16,11 @@ module.exports = {
         }
 
         const page = context.getFilename().split('pages')[1]
+        if (!page) {
+          return
+        }
         const { name, dir } = path.parse(page)
         if (
-          !page ||
           name.startsWith('_document') ||
           (dir === '/_document' && name === 'index')
         ) {

packages/eslint-plugin-next/lib/utils/node-attributes.js

@@ -26,7 +26,9 @@ class NodeAttributes {
           this.attributes[attribute.name.name].value = attribute.value.value
         } else if (attribute.value.expression) {
           this.attributes[attribute.name.name].value =
-            attribute.value.expression.value
+            typeof attribute.value.expression.value !== 'undefined'
+              ? attribute.value.expression.value
+              : attribute.value.expression.properties
         }
       }
     })

packages/next/build/index.ts

@@ -660,6 +660,8 @@ export default async function build(
     const serverPropsPages = new Set<string>()
     const additionalSsgPaths = new Map<string, Array<string>>()
     const additionalSsgPathsEncoded = new Map<string, Array<string>>()
+    const pageTraceIncludes = new Map<string, Array<string>>()
+    const pageTraceExcludes = new Map<string, Array<string>>()
     const pageInfos = new Map<string, PageInfo>()
     const pagesManifest = JSON.parse(
       await promises.readFile(manifestPath, 'utf8')
@@ -841,6 +843,11 @@ export default async function build(
                   )
                 })
 
+                if (config.experimental.nftTracing) {
+                  pageTraceIncludes.set(page, workerResult.traceIncludes || [])
+                  pageTraceExcludes.set(page, workerResult.traceExcludes || [])
+                }
+
                 if (
                   workerResult.isStatic === false &&
                   (workerResult.isHybridAmp || workerResult.isAmpOnly)
@@ -979,6 +986,63 @@ export default async function build(
       )
     }
 
+    if (config.experimental.nftTracing) {
+      const globOrig = require('next/dist/compiled/glob') as typeof import('next/dist/compiled/glob')
+      const glob = (pattern: string): Promise<string[]> => {
+        return new Promise((resolve, reject) => {
+          globOrig(pattern, { cwd: dir }, (err, files) => {
+            if (err) {
+              return reject(err)
+            }
+            resolve(files)
+          })
+        })
+      }
+
+      for (const page of pageKeys) {
+        const includeGlobs = pageTraceIncludes.get(page)
+        const excludeGlobs = pageTraceExcludes.get(page)
+
+        if (!includeGlobs?.length && !excludeGlobs?.length) {
+          continue
+        }
+
+        const traceFile = path.join(
+          distDir,
+          'server/pages',
+          `${page}.js.nft.json`
+        )
+        const traceContent = JSON.parse(
+          await promises.readFile(traceFile, 'utf8')
+        )
+        let includes: string[] = []
+        let excludes: string[] = []
+
+        if (includeGlobs?.length) {
+          for (const includeGlob of includeGlobs) {
+            includes.push(...(await glob(includeGlob)))
+          }
+        }
+
+        if (excludeGlobs?.length) {
+          for (const excludeGlob of excludeGlobs) {
+            excludes.push(...(await glob(excludeGlob)))
+          }
+        }
+
+        const combined = new Set([...traceContent.files, ...includes])
+        excludes.forEach((file) => combined.delete(file))
+
+        await promises.writeFile(
+          traceFile,
+          JSON.stringify({
+            version: traceContent.version,
+            files: [...combined],
+          })
+        )
+      }
+    }
+
     if (serverPropsPages.size > 0 || ssgPages.size > 0) {
       // We update the routes manifest after the build with the
       // data routes since we can't determine these until after build

packages/next/build/utils.ts

@@ -23,7 +23,7 @@ import { getRouteMatcher, getRouteRegex } from '../shared/lib/router/utils'
 import { isDynamicRoute } from '../shared/lib/router/utils/is-dynamic'
 import escapePathDelimiters from '../shared/lib/router/utils/escape-path-delimiters'
 import { findPageFile } from '../server/lib/find-page-file'
-import { GetStaticPaths } from 'next/types'
+import { GetStaticPaths, PageConfig } from 'next/types'
 import { denormalizePagePath } from '../server/normalize-page-path'
 import { BuildManifest } from '../server/get-page-files'
 import { removePathTrailingSlash } from '../client/normalize-trailing-slash'
@@ -831,6 +831,8 @@ export async function isPageStatic(
   encodedPrerenderRoutes?: string[]
   prerenderFallback?: boolean | 'blocking'
   isNextImageImported?: boolean
+  traceIncludes?: string[]
+  traceExcludes?: string[]
 }> {
   const isPageStaticSpan = trace('is-page-static-utils', parentId)
   return isPageStaticSpan.traceAsyncFn(async () => {
@@ -925,7 +927,7 @@ export async function isPageStatic(
       }
 
       const isNextImageImported = (global as any).__NEXT_IMAGE_IMPORTED
-      const config = mod.config || {}
+      const config: PageConfig = mod.config || {}
       return {
         isStatic: !hasStaticProps && !hasGetInitialProps && !hasServerProps,
         isHybridAmp: config.amp === 'hybrid',
@@ -936,6 +938,8 @@ export async function isPageStatic(
         hasStaticProps,
         hasServerProps,
         isNextImageImported,
+        traceIncludes: config.unstable_includeFiles || [],
+        traceExcludes: config.unstable_excludeFiles || [],
       }
     } catch (err) {
       if (err.code === 'MODULE_NOT_FOUND') return {}

packages/next/build/webpack-config.ts

@@ -38,6 +38,7 @@ import BuildStatsPlugin from './webpack/plugins/build-stats-plugin'
 import ChunkNamesPlugin from './webpack/plugins/chunk-names-plugin'
 import { JsConfigPathsPlugin } from './webpack/plugins/jsconfig-paths-plugin'
 import { DropClientPage } from './webpack/plugins/next-drop-client-page-plugin'
+import { TraceEntryPointsPlugin } from './webpack/plugins/next-trace-entrypoints-plugin'
 import NextJsSsrImportPlugin from './webpack/plugins/nextjs-ssr-import'
 import NextJsSSRModuleCachePlugin from './webpack/plugins/nextjs-ssr-module-cache'
 import PagesManifestPlugin from './webpack/plugins/pages-manifest-plugin'
@@ -1245,6 +1246,12 @@ export default async function getBaseWebpackConfig(
           pagesDir,
         }),
       !isServer && new DropClientPage(),
+      config.experimental.nftTracing &&
+        !isLikeServerless &&
+        isServer &&
+        !dev &&
+        isWebpack5 &&
+        new TraceEntryPointsPlugin({ appDir: dir }),
       // Moment.js is an extremely popular library that bundles large locale files
       // by default due to how Webpack interprets its code. This is a practical
       // solution that requires the user to opt into importing specific locales.