From eff6343711c32a0dd69ed03679282efdfde81394 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Mon, 15 Jun 2020 09:26:47 -0700
Subject: [PATCH 01/49] adding a font gatherer webpack plugin

---
 packages/next/build/webpack-config.ts         |   2 +
 .../font-stylesheet-gathering-plugin.ts       | 129 ++++++++++++++++++
 2 files changed, 131 insertions(+)
 create mode 100644 packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 23dbae7c485e8..d8b185dddb1ab 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -52,6 +52,7 @@ import WebpackConformancePlugin, {
 } from './webpack/plugins/webpack-conformance-plugin'
 import { WellKnownErrorsPlugin } from './webpack/plugins/wellknown-errors-plugin'
 import { codeFrameColumns } from '@babel/code-frame'
+import FontStylesheetGatheringPlugin from './webpack/plugins/font-stylesheet-gathering-plugin'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 
@@ -939,6 +940,7 @@ export default async function getBaseWebpackConfig(
           chunkFilename: (inputChunkName: string) =>
             inputChunkName.replace(/\.js$/, '.module.js'),
         }),
+      !dev && !isServer && new FontStylesheetGatheringPlugin(),
       config.experimental.conformance &&
         !dev &&
         new WebpackConformancePlugin({
diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
new file mode 100644
index 0000000000000..ead032ece1dee
--- /dev/null
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -0,0 +1,129 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { NodePath } from 'ast-types/lib/node-path'
+import { visit } from 'next/dist/compiled/recast'
+import { compilation as CompilationType, Compiler } from 'webpack'
+import { namedTypes } from 'ast-types'
+import { RawSource } from 'webpack-sources'
+
+const https = require('https')
+
+interface VisitorMap {
+  [key: string]: (path: NodePath) => void
+}
+
+export default class FontStylesheetGatheringPlugin {
+  compiler?: Compiler
+  gatheredStylesheets: Array<string> = []
+
+  private parserHandler = (
+    factory: CompilationType.NormalModuleFactory
+  ): void => {
+    const JS_TYPES = ['auto', 'esm', 'dynamic']
+    // Do an extra walk per module and add interested visitors to the walk.
+    for (const type of JS_TYPES) {
+      factory.hooks.parser
+        .for('javascript/' + type)
+        .tap(this.constructor.name, (parser) => {
+          var that = this
+          parser.hooks.program.tap(this.constructor.name, (ast: any) => {
+            visit(ast, {
+              visitCallExpression: function (path) {
+                const { node }: { node: namedTypes.CallExpression } = path
+                if (!node.arguments || node.arguments.length < 2) {
+                  return false
+                }
+                if (isNodeCreatingLinkElement(node)) {
+                  const propsNode = node
+                    .arguments[1] as namedTypes.ObjectExpression
+                  if (!propsNode.properties) {
+                    return false
+                  }
+                  const props: {
+                    [key: string]: string
+                  } = propsNode.properties.reduce(
+                    (originalProps, prop: any) => {
+                      // todo check the type of prop
+                      // @ts-ignore
+                      originalProps[prop.key.name] = prop.value.value
+                      return originalProps
+                    },
+                    {}
+                  )
+
+                  if (!props.href) {
+                    return false
+                  }
+                  that.gatheredStylesheets.push(props.href)
+                }
+                this.traverse(path)
+                return false
+              },
+            })
+          })
+        })
+    }
+  }
+
+  public apply(compiler: Compiler) {
+    this.compiler = compiler
+    compiler.hooks.normalModuleFactory.tap(
+      this.constructor.name,
+      this.parserHandler
+    )
+    compiler.hooks.make.tapAsync(this.constructor.name, (compilation, cb) => {
+      compilation.hooks.finishModules.tapAsync(
+        this.constructor.name,
+        async (_, modulesFinished) => {
+          const allContent = this.gatheredStylesheets.map((url) => getFile(url))
+          const manifestContent = (await Promise.allSettled(allContent)).map(
+            (promise) => promise.value
+          )
+          compilation.assets['font-manifest.json'] = new RawSource(
+            JSON.stringify(manifestContent, null, '  ')
+          )
+          modulesFinished()
+        }
+      )
+      cb()
+    })
+  }
+}
+
+function isNodeCreatingLinkElement(node: namedTypes.CallExpression) {
+  const callee = node.callee as namedTypes.Identifier
+  if (callee.type !== 'Identifier') {
+    return false
+  }
+  const componentNode = node.arguments[0] as namedTypes.Literal
+  if (componentNode.type !== 'Literal') {
+    return false
+  }
+  // Next has pragma: __jsx.
+  return callee.name === '__jsx' && componentNode.value === 'link'
+}
+
+function getFile(url: string): Promise<string> {
+  return new Promise((resolve) => {
+    let rawData: any = ''
+    https.get(
+      url,
+      {
+        headers: {
+          'user-agent':
+            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36',
+        },
+      },
+      (res: any) => {
+        res.on('data', (chunk: any) => {
+          rawData += chunk
+        })
+        res.on('end', () => {
+          resolve({
+            url,
+            content: rawData.toString('utf8'),
+          })
+        })
+      }
+    )
+  })
+}

From 9ed7962c30dc90c7e4b307f5dc8cbfe96aba7169 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Mon, 15 Jun 2020 09:26:58 -0700
Subject: [PATCH 02/49] fixing dep

---
 packages/next/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/package.json b/packages/next/package.json
index 12c813828e9e5..95185777600ff 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -78,6 +78,7 @@
     "@babel/types": "7.9.6",
     "@next/react-dev-overlay": "9.4.5-canary.7",
     "@next/react-refresh-utils": "9.4.5-canary.7",
+    "ast-types": "0.13.2",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
@@ -157,7 +158,6 @@
     "@zeit/ncc": "0.22.0",
     "amphtml-validator": "1.0.31",
     "arg": "4.1.0",
-    "ast-types": "0.13.2",
     "async-retry": "1.2.3",
     "async-sema": "3.0.0",
     "babel-loader": "8.1.0",

From 3b85140e29f4f8dafa33ff2aa54051fe56176d6e Mon Sep 17 00:00:00 2001
From: atcastle <atcastle@gmail.com>
Date: Thu, 18 Jun 2020 13:39:06 -0700
Subject: [PATCH 03/49] Initial commit with framework for post processing
 middleware

---
 packages/next/next-server/lib/post-process.ts | 104 ++++++++++++++++++
 packages/next/next-server/server/config.ts    |   1 +
 .../next/next-server/server/next-server.ts    |   2 +
 packages/next/next-server/server/render.tsx   |   4 +
 packages/next/package.json                    |   2 +
 5 files changed, 113 insertions(+)
 create mode 100644 packages/next/next-server/lib/post-process.ts

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
new file mode 100644
index 0000000000000..f4d2dabc60347
--- /dev/null
+++ b/packages/next/next-server/lib/post-process.ts
@@ -0,0 +1,104 @@
+import { parse, HTMLElement } from 'node-html-parser'
+
+const MIDDLEWARE_TIME_BUDGET = 10
+
+type postProcessOptions = {
+  preloadImages: boolean
+}
+
+type postProcessData = {
+  preloads: {
+    images: Array<string>
+  }
+}
+
+type postProcessMiddleware = (
+  htmlRoot: HTMLElement,
+  data: postProcessData
+) => Promise<void>
+type middlewareSignature = {
+  name: string
+  middleware: postProcessMiddleware
+  condition: ((options: postProcessOptions) => boolean) | null
+}
+
+const middlewareRegistry: Array<middlewareSignature> = []
+
+function registerPostProcessor(
+  name: string,
+  middleware: postProcessMiddleware,
+  condition?: (options: postProcessOptions) => boolean
+) {
+  middlewareRegistry.push({ name, middleware, condition: condition || null })
+}
+
+async function processHTML(
+  html: string,
+  options: postProcessOptions
+): Promise<string> {
+  // Don't parse unless there's at least one processor middleware
+  if (!middlewareRegistry[0]) {
+    return html
+  }
+  const data: postProcessData = {
+    preloads: {
+      images: [],
+    },
+  }
+  const root: HTMLElement = parse(html)
+
+  // Calls the middleware, with some instrumentation and logging
+  async function callMiddleWare(
+    middleware: postProcessMiddleware,
+    name: string
+  ) {
+    let timer = Date.now()
+    await middleware(root, data)
+    timer = Date.now() - timer
+    if (timer > MIDDLEWARE_TIME_BUDGET) {
+      console.warn(
+        `The postprocess middleware "${name}" took ${timer}ms to complete. This is longer than the ${MIDDLEWARE_TIME_BUDGET} limit.`
+      )
+    }
+    return
+  }
+
+  for (let i = 0; i < middlewareRegistry.length; i++) {
+    let middleware = middlewareRegistry[i]
+    if (!middleware.condition || middleware.condition(options)) {
+      await callMiddleWare(
+        middlewareRegistry[i].middleware,
+        middlewareRegistry[i].name
+      )
+    }
+  }
+
+  return root.toString()
+}
+
+// Middleware
+const findImages: postProcessMiddleware = async (htmlRoot, data) => {
+  // TODO: Image preload finding logic here--adds to data
+  console.log(htmlRoot, data)
+  return
+}
+
+const renderPreloads: postProcessMiddleware = async (htmlRoot, data) => {
+  // TODO: Render preload tags from data
+  console.log(htmlRoot, data)
+  return
+}
+
+// Initialization
+registerPostProcessor(
+  'Find-Images',
+  findImages,
+  (options) => options.preloadImages
+)
+registerPostProcessor(
+  'Render-Preloads',
+  renderPreloads,
+  (options) => options.preloadImages
+)
+
+export default processHTML
diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts
index 9e0487e29c5ab..43ae8f6b36b0d 100644
--- a/packages/next/next-server/server/config.ts
+++ b/packages/next/next-server/server/config.ts
@@ -53,6 +53,7 @@ const defaultConfig: { [key: string]: any } = {
     pageEnv: false,
     productionBrowserSourceMaps: false,
     optionalCatchAll: false,
+    postProcessOptimize: false,
   },
   future: {
     excludeDefaultMomentLocales: false,
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index babd4aa96b94e..e592ee7beaa71 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -122,6 +122,7 @@ export default class Server {
     customServer?: boolean
     ampOptimizerConfig?: { [key: string]: any }
     basePath: string
+    postProcess: boolean
   }
   private compression?: Middleware
   private onErrorMiddleware?: ({ err }: { err: Error }) => Promise<void>
@@ -174,6 +175,7 @@ export default class Server {
       customServer: customServer === true ? true : undefined,
       ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
       basePath: this.nextConfig.experimental.basePath,
+      postProcess: this.nextConfig.experimental.postProcessOptimization,
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index e0c7329c9ab1c..b9bbcc14a7caf 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -42,6 +42,7 @@ import { LoadComponentsReturnType, ManifestItem } from './load-components'
 import optimizeAmp from './optimize-amp'
 import { UnwrapPromise } from '../../lib/coalesced-function'
 import { GetStaticProps, GetServerSideProps } from '../../types'
+import postProcess from '../lib/post-process'
 
 function noRouter() {
   const message =
@@ -151,6 +152,7 @@ export type RenderOptsPartial = {
   ampValidator?: (html: string, pathname: string) => Promise<void>
   ampSkipValidation?: boolean
   ampOptimizerConfig?: { [key: string]: any }
+  postProcess: boolean
   isDataReq?: boolean
   params?: ParsedUrlQuery
   previewProps: __ApiPreviewProps
@@ -770,6 +772,8 @@ export async function renderToHTML(
     }
   }
 
+  html = await postProcess(html, { preloadImages: renderOpts.postProcess })
+
   if (inAmpMode || hybridAmp) {
     // fix &amp being escaped for amphtml rel link
     html = html.replace(/&amp;amp=1/g, '&amp=1')
diff --git a/packages/next/package.json b/packages/next/package.json
index 12c813828e9e5..fa41338c3efe6 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -92,6 +92,7 @@
     "mkdirp": "0.5.3",
     "native-url": "0.3.1",
     "neo-async": "2.6.1",
+    "node-html-parser": "^1.2.19",
     "pnp-webpack-plugin": "1.6.4",
     "postcss": "7.0.29",
     "prop-types": "15.7.2",
@@ -193,6 +194,7 @@
     "lru-cache": "5.1.1",
     "nanoid": "2.0.3",
     "node-fetch": "2.6.0",
+    "node-html-parser": "1.2.19",
     "ora": "4.0.4",
     "path-to-regexp": "6.1.0",
     "postcss-flexbugs-fixes": "4.2.1",

From d5ed404747d1190b69a59263ede79666457bd48c Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 23 Jun 2020 14:18:30 -0700
Subject: [PATCH 04/49] generating the style tags

---
 packages/next/next-server/lib/post-process.ts | 34 +++++++++++++++++--
 yarn.lock                                     | 12 +++++++
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index f4d2dabc60347..4a95a3842755c 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -15,7 +15,7 @@ type postProcessData = {
 type postProcessMiddleware = (
   htmlRoot: HTMLElement,
   data: postProcessData
-) => Promise<void>
+) => Promise<HTMLElement>
 type middlewareSignature = {
   name: string
   middleware: postProcessMiddleware
@@ -45,7 +45,7 @@ async function processHTML(
       images: [],
     },
   }
-  const root: HTMLElement = parse(html)
+  let root: HTMLElement = parse(html)
 
   // Calls the middleware, with some instrumentation and logging
   async function callMiddleWare(
@@ -53,7 +53,7 @@ async function processHTML(
     name: string
   ) {
     let timer = Date.now()
-    await middleware(root, data)
+    root = await middleware(root, data)
     timer = Date.now() - timer
     if (timer > MIDDLEWARE_TIME_BUDGET) {
       console.warn(
@@ -83,6 +83,32 @@ const findImages: postProcessMiddleware = async (htmlRoot, data) => {
   return
 }
 
+// Middleware
+const inlineFonts: postProcessMiddleware = async (htmlRoot) => {
+  const links = htmlRoot
+    .querySelectorAll('link')
+    .filter(
+      (tag) =>
+        tag.getAttribute('rel') === 'stylesheet' &&
+        tag.hasAttribute('href') &&
+        tag
+          .getAttribute('href')
+          .startsWith('https://fonts.googleapis.com/css2?')
+    )
+  links.forEach((link) => {
+    link.insertAdjacentHTML(
+      'afterend',
+      `<style data-optimized-fonts='${link.getAttribute('href')}'></style>`
+    )
+    /**
+     * Removing the actual element is not supported in node-html-parser
+     * so we just remove the href effectively making it inert.
+     */
+    link.removeAttribute('href')
+  })
+  return htmlRoot
+}
+
 const renderPreloads: postProcessMiddleware = async (htmlRoot, data) => {
   // TODO: Render preload tags from data
   console.log(htmlRoot, data)
@@ -95,6 +121,8 @@ registerPostProcessor(
   findImages,
   (options) => options.preloadImages
 )
+// Initialization
+registerPostProcessor('Inline-Fonts', inlineFonts, () => true)
 registerPostProcessor(
   'Render-Preloads',
   renderPreloads,
diff --git a/yarn.lock b/yarn.lock
index 34d8f3355af81..acc1f5360fb4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7753,6 +7753,11 @@ hawk@~6.0.2:
     hoek "4.x.x"
     sntp "2.x.x"
 
+he@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+  integrity sha1-k0EP0hsAlzUVH4howvJx80J+I/0=
+
 header-case@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.1.tgz#9535973197c144b09613cd65d317ef19963bd02d"
@@ -10777,6 +10782,13 @@ node-gyp@^4.0.0:
     tar "^4.4.8"
     which "1"
 
+node-html-parser@^1.2.19:
+  version "1.2.19"
+  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-1.2.19.tgz#2cb14ce7981dfe2c0f5af53cf8654a3d49cded7d"
+  integrity sha512-MQvBz+qk7SbqNPp0c7hR0F8lRTPXK5n2tww4eFmXf+cXp5hZHtL5rJHlAWlcjzRep+T5Pd5lz3lqFgN7IFYEiw==
+  dependencies:
+    he "1.1.1"
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"

From 39fcfcded646c4b9c904b16e469e8d12b5f94c2c Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 24 Jun 2020 15:29:35 -0700
Subject: [PATCH 05/49] WIP font optimizations

---
 packages/next/export/worker.ts                | 21 +++++-
 packages/next/next-server/lib/constants.ts    |  1 +
 packages/next/next-server/lib/post-process.ts | 69 ++++++++++++++-----
 .../next/next-server/server/next-server.ts    | 11 ++-
 packages/next/next-server/server/render.tsx   | 14 +++-
 packages/next/next-server/server/require.ts   |  6 ++
 6 files changed, 101 insertions(+), 21 deletions(-)

diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 96f51ecb6e511..5be1f7bf8d178 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -13,6 +13,7 @@ import 'next/dist/next-server/server/node-polyfill-fetch'
 import { IncomingMessage, ServerResponse } from 'http'
 import { ComponentType } from 'react'
 import { GetStaticProps } from '../types'
+import { requireFontManifest } from '../next-server/server/require'
 
 const envConfig = require('../next-server/lib/runtime-config')
 
@@ -61,6 +62,7 @@ interface RenderOpts {
   ampSkipValidation?: boolean
   hybridAmp?: boolean
   inAmpMode?: boolean
+  getFontDefinition?: (url: string) => string
 }
 
 type ComponentModule = ComponentType<{}> & {
@@ -254,7 +256,24 @@ export default async function exportPage({
         html = components.Component
         queryWithAutoExportWarn()
       } else {
-        curRenderOpts = { ...components, ...renderOpts, ampPath, params }
+        const getFontDefinition = (fontURL: string) => {
+          const manifest = requireFontManifest(distDir)
+          let fontContent = ''
+          manifest.forEach((font: any) => {
+            if (font && font.url === fontURL) {
+              fontContent = font.content
+            }
+          })
+
+          return fontContent
+        }
+        curRenderOpts = {
+          ...components,
+          ...renderOpts,
+          ampPath,
+          params,
+          getFontDefinition,
+        }
         // @ts-ignore
         html = await renderMethod(req, res, page, query, curRenderOpts)
       }
diff --git a/packages/next/next-server/lib/constants.ts b/packages/next/next-server/lib/constants.ts
index 159efa0c30902..a4edd8cd28904 100644
--- a/packages/next/next-server/lib/constants.ts
+++ b/packages/next/next-server/lib/constants.ts
@@ -9,6 +9,7 @@ export const EXPORT_DETAIL = 'export-detail.json'
 export const PRERENDER_MANIFEST = 'prerender-manifest.json'
 export const ROUTES_MANIFEST = 'routes-manifest.json'
 export const REACT_LOADABLE_MANIFEST = 'react-loadable-manifest.json'
+export const FONT_MANIFEST = 'font-manifest.json'
 export const SERVER_DIRECTORY = 'server'
 export const SERVERLESS_DIRECTORY = 'serverless'
 export const CONFIG_FILE = 'next.config.js'
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 4a95a3842755c..a37e5a1a758a8 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -4,6 +4,11 @@ const MIDDLEWARE_TIME_BUDGET = 10
 
 type postProcessOptions = {
   preloadImages: boolean
+  optimizeFonts: boolean
+}
+
+type renderOpts = {
+  getFontDefinition?: (url: string) => string
 }
 
 type postProcessData = {
@@ -14,8 +19,11 @@ type postProcessData = {
 
 type postProcessMiddleware = (
   htmlRoot: HTMLElement,
-  data: postProcessData
-) => Promise<HTMLElement>
+  rawString: string,
+  data: postProcessData,
+  options: renderOpts
+) => Promise<string>
+
 type middlewareSignature = {
   name: string
   middleware: postProcessMiddleware
@@ -34,26 +42,27 @@ function registerPostProcessor(
 
 async function processHTML(
   html: string,
+  data: renderOpts,
   options: postProcessOptions
 ): Promise<string> {
   // Don't parse unless there's at least one processor middleware
   if (!middlewareRegistry[0]) {
     return html
   }
-  const data: postProcessData = {
+  const postProcessData: postProcessData = {
     preloads: {
       images: [],
     },
   }
-  let root: HTMLElement = parse(html)
-
+  const root: HTMLElement = parse(html)
+  let document = html
   // Calls the middleware, with some instrumentation and logging
   async function callMiddleWare(
     middleware: postProcessMiddleware,
     name: string
   ) {
     let timer = Date.now()
-    root = await middleware(root, data)
+    document = await middleware(root, document, postProcessData, data)
     timer = Date.now() - timer
     if (timer > MIDDLEWARE_TIME_BUDGET) {
       console.warn(
@@ -73,18 +82,28 @@ async function processHTML(
     }
   }
 
-  return root.toString()
+  return document
 }
 
 // Middleware
-const findImages: postProcessMiddleware = async (htmlRoot, data) => {
+const findImages: postProcessMiddleware = async (htmlRoot, document, data) => {
   // TODO: Image preload finding logic here--adds to data
   console.log(htmlRoot, data)
-  return
+  return document
 }
 
 // Middleware
-const inlineFonts: postProcessMiddleware = async (htmlRoot) => {
+const inlineFonts: postProcessMiddleware = async (
+  htmlRoot,
+  document,
+  _data,
+  options
+) => {
+  if (!options.getFontDefinition) {
+    return htmlRoot
+  }
+
+  const getFontDefinition = options.getFontDefinition
   const links = htmlRoot
     .querySelectorAll('link')
     .filter(
@@ -96,23 +115,33 @@ const inlineFonts: postProcessMiddleware = async (htmlRoot) => {
           .startsWith('https://fonts.googleapis.com/css2?')
     )
   links.forEach((link) => {
-    link.insertAdjacentHTML(
-      'afterend',
-      `<style data-optimized-fonts='${link.getAttribute('href')}'></style>`
+    const url = link.getAttribute('href')
+    console.log(document, '...', `<link href="${url}"`)
+    document = document.replace(
+      `<link href="${url}"`,
+      `<link data-href="${url}"`
+    )
+    document = document.replace(
+      '</head>',
+      `<style data-font-url='${url}'>${getFontDefinition(url)}</style></head>`
     )
     /**
      * Removing the actual element is not supported in node-html-parser
      * so we just remove the href effectively making it inert.
      */
-    link.removeAttribute('href')
+    //link.removeAttribute('href')
   })
-  return htmlRoot
+  return document
 }
 
-const renderPreloads: postProcessMiddleware = async (htmlRoot, data) => {
+const renderPreloads: postProcessMiddleware = async (
+  htmlRoot,
+  document,
+  data
+) => {
   // TODO: Render preload tags from data
   console.log(htmlRoot, data)
-  return
+  return document
 }
 
 // Initialization
@@ -122,7 +151,11 @@ registerPostProcessor(
   (options) => options.preloadImages
 )
 // Initialization
-registerPostProcessor('Inline-Fonts', inlineFonts, () => true)
+registerPostProcessor(
+  'Inline-Fonts',
+  inlineFonts,
+  (options) => options.optimizeFonts || true
+)
 registerPostProcessor(
   'Render-Preloads',
   renderPreloads,
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index e592ee7beaa71..8dad3d58611b6 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -42,7 +42,7 @@ import { recursiveReadDirSync } from './lib/recursive-readdir-sync'
 import { loadComponents, LoadComponentsReturnType } from './load-components'
 import { normalizePagePath } from './normalize-page-path'
 import { RenderOpts, RenderOptsPartial, renderToHTML } from './render'
-import { getPagePath } from './require'
+import { getPagePath, requireFontManifest } from './require'
 import Router, {
   DynamicRoutes,
   PageChecker,
@@ -123,6 +123,8 @@ export default class Server {
     ampOptimizerConfig?: { [key: string]: any }
     basePath: string
     postProcess: boolean
+    optimizeFonts: boolean
+    getFontDefinition: (url: string) => string
   }
   private compression?: Middleware
   private onErrorMiddleware?: ({ err }: { err: Error }) => Promise<void>
@@ -176,6 +178,8 @@ export default class Server {
       ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
       basePath: this.nextConfig.experimental.basePath,
       postProcess: this.nextConfig.experimental.postProcessOptimization,
+      optimizeFonts: this.nextConfig.experimental.fontOptimization,
+      getFontDefinition: this.getFontDefinition,
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side
@@ -314,6 +318,11 @@ export default class Server {
     return (this._cachedPreviewManifest = manifest)
   }
 
+  protected getFontDefinition(url: string): string {
+    requireFontManifest(this.distDir)
+    return url + 'server-blah'
+  }
+
   protected getPreviewProps(): __ApiPreviewProps {
     return this.getPrerenderManifest().preview
   }
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index b9bbcc14a7caf..8b72e27a97a7b 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -153,11 +153,13 @@ export type RenderOptsPartial = {
   ampSkipValidation?: boolean
   ampOptimizerConfig?: { [key: string]: any }
   postProcess: boolean
+  optimizeFonts: boolean
   isDataReq?: boolean
   params?: ParsedUrlQuery
   previewProps: __ApiPreviewProps
   basePath: string
   unstable_runtimeJS?: false
+  getFontDefinition?: (url: string) => string
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial
@@ -293,6 +295,7 @@ export async function renderToHTML(
     params,
     previewProps,
     basePath,
+    getFontDefinition,
   } = renderOpts
 
   const callMiddleware = async (method: string, args: any[], props = false) => {
@@ -772,7 +775,16 @@ export async function renderToHTML(
     }
   }
 
-  html = await postProcess(html, { preloadImages: renderOpts.postProcess })
+  html = await postProcess(
+    html,
+    {
+      getFontDefinition,
+    },
+    {
+      preloadImages: renderOpts.postProcess,
+      optimizeFonts: renderOpts.optimizeFonts,
+    }
+  )
 
   if (inAmpMode || hybridAmp) {
     // fix &amp being escaped for amphtml rel link
diff --git a/packages/next/next-server/server/require.ts b/packages/next/next-server/server/require.ts
index 5e59f15d0167e..fe34b80f4e146 100644
--- a/packages/next/next-server/server/require.ts
+++ b/packages/next/next-server/server/require.ts
@@ -4,6 +4,7 @@ import {
   PAGES_MANIFEST,
   SERVER_DIRECTORY,
   SERVERLESS_DIRECTORY,
+  FONT_MANIFEST,
 } from '../lib/constants'
 import { normalizePagePath, denormalizePagePath } from './normalize-page-path'
 import { PagesManifest } from '../../build/webpack/plugins/pages-manifest-plugin'
@@ -54,3 +55,8 @@ export function requirePage(
   }
   return require(pagePath)
 }
+
+export function requireFontManifest(distDir: string) {
+  const manifest = require(join(distDir, FONT_MANIFEST))
+  return manifest
+}

From 8a932d1f02e7e4fd55e80812d1fae1235cd9379c Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Thu, 25 Jun 2020 01:17:42 -0700
Subject: [PATCH 06/49] working static pages font replacement

---
 packages/next/next-server/lib/head.tsx        |   8 +
 packages/next/next-server/lib/post-process.ts | 201 ++++++++++++------
 2 files changed, 144 insertions(+), 65 deletions(-)

diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index 9741566b22e61..c6edbdf71149f 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -136,6 +136,14 @@ function reduceComponents(
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
+      if (
+        c.type === 'link' &&
+        c.props['href'] &&
+        c.props['href'].startsWith('https://fonts.googleapis.com/css2?')
+      ) {
+        c.props['data-href'] = c.props['href']
+        delete c.props['href']
+      }
       return React.cloneElement(c, { key })
     })
 }
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index a37e5a1a758a8..9a93790ccdf06 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -17,16 +17,22 @@ type postProcessData = {
   }
 }
 
-type postProcessMiddleware = (
-  htmlRoot: HTMLElement,
-  rawString: string,
-  data: postProcessData,
-  options: renderOpts
-) => Promise<string>
+interface PostProcessMiddleware {
+  inspect: (
+    originalDom: HTMLElement,
+    data: postProcessData,
+    options: renderOpts
+  ) => void
+  mutate: (
+    markup: string,
+    data: postProcessData,
+    options: renderOpts
+  ) => Promise<string>
+}
 
 type middlewareSignature = {
   name: string
-  middleware: postProcessMiddleware
+  middleware: PostProcessMiddleware
   condition: ((options: postProcessOptions) => boolean) | null
 }
 
@@ -34,7 +40,7 @@ const middlewareRegistry: Array<middlewareSignature> = []
 
 function registerPostProcessor(
   name: string,
-  middleware: postProcessMiddleware,
+  middleware: PostProcessMiddleware,
   condition?: (options: postProcessOptions) => boolean
 ) {
   middlewareRegistry.push({ name, middleware, condition: condition || null })
@@ -58,11 +64,12 @@ async function processHTML(
   let document = html
   // Calls the middleware, with some instrumentation and logging
   async function callMiddleWare(
-    middleware: postProcessMiddleware,
+    middleware: PostProcessMiddleware,
     name: string
   ) {
     let timer = Date.now()
-    document = await middleware(root, document, postProcessData, data)
+    middleware.inspect(root, postProcessData, data)
+    document = await middleware.mutate(document, postProcessData, data)
     timer = Date.now() - timer
     if (timer > MIDDLEWARE_TIME_BUDGET) {
       console.warn(
@@ -85,80 +92,144 @@ async function processHTML(
   return document
 }
 
-// Middleware
-const findImages: postProcessMiddleware = async (htmlRoot, document, data) => {
-  // TODO: Image preload finding logic here--adds to data
-  console.log(htmlRoot, data)
-  return document
+class FindImages implements PostProcessMiddleware {
+  inspect(
+    _originalDom: HTMLElement,
+    _data: postProcessData,
+    _options: renderOpts
+  ) {
+    return
+  }
+  mutate = async (
+    markup: string,
+    _data: postProcessData,
+    _options: renderOpts
+  ) => {
+    return markup
+  }
 }
 
-// Middleware
-const inlineFonts: postProcessMiddleware = async (
-  htmlRoot,
-  document,
-  _data,
-  options
-) => {
-  if (!options.getFontDefinition) {
-    return htmlRoot
-  }
+class FontOptimizerMiddleware implements PostProcessMiddleware {
+  fontDefinitions: {
+    [key: string]: string
+  } = {}
 
-  const getFontDefinition = options.getFontDefinition
-  const links = htmlRoot
-    .querySelectorAll('link')
-    .filter(
-      (tag) =>
-        tag.getAttribute('rel') === 'stylesheet' &&
-        tag.hasAttribute('href') &&
-        tag
-          .getAttribute('href')
-          .startsWith('https://fonts.googleapis.com/css2?')
-    )
-  links.forEach((link) => {
-    const url = link.getAttribute('href')
-    console.log(document, '...', `<link href="${url}"`)
-    document = document.replace(
-      `<link href="${url}"`,
-      `<link data-href="${url}"`
-    )
-    document = document.replace(
-      '</head>',
-      `<style data-font-url='${url}'>${getFontDefinition(url)}</style></head>`
-    )
-    /**
-     * Removing the actual element is not supported in node-html-parser
-     * so we just remove the href effectively making it inert.
-     */
-    //link.removeAttribute('href')
-  })
-  return document
+  inspect(
+    originalDom: HTMLElement,
+    _data: postProcessData,
+    options: renderOpts
+  ) {
+    if (!options.getFontDefinition) {
+      return
+    }
+    const getFontDefinition = options.getFontDefinition
+    // collecting all the requested font definitions
+    originalDom
+      .querySelectorAll('link')
+      .filter(
+        (tag: HTMLElement) =>
+          tag.getAttribute('rel') === 'stylesheet' &&
+          tag.hasAttribute('data-href') &&
+          tag
+            .getAttribute('data-href')
+            .startsWith('https://fonts.googleapis.com/css2?')
+      )
+      .forEach((element: HTMLElement) => {
+        const url = element.getAttribute('data-href')
+        this.fontDefinitions[url] = getFontDefinition(url)
+      })
+  }
+  mutate = async (
+    markup: string,
+    _data: postProcessData,
+    _options: renderOpts
+  ) => {
+    let result = markup
+    for (const key in this.fontDefinitions) {
+      result = result.replace(
+        '</head>',
+        `<style data-href="${key}">${this.fontDefinitions[key].replace(
+          /\n/g,
+          ''
+        )}</style>`
+      )
+    }
+    return result
+  }
 }
 
-const renderPreloads: postProcessMiddleware = async (
-  htmlRoot,
-  document,
-  data
-) => {
-  // TODO: Render preload tags from data
-  console.log(htmlRoot, data)
-  return document
+// Middleware
+// const inlineFonts: postProcessMiddleware = async (
+//   htmlRoot,
+//   document,
+//   _data,
+//   options
+// ) => {
+//   if (!options.getFontDefinition) {
+//     return htmlRoot
+//   }
+
+//   const getFontDefinition = options.getFontDefinition
+//   const links = htmlRoot
+//     .querySelectorAll('link')
+//     .filter(
+//       (tag) =>
+//         tag.getAttribute('rel') === 'stylesheet' &&
+//         tag.hasAttribute('href') &&
+//         tag
+//           .getAttribute('href')
+//           .startsWith('https://fonts.googleapis.com/css2?')
+//     )
+//   links.forEach((link) => {
+//     const url = link.getAttribute('href')
+//     console.log(document, '...', `<link href="${url}"`)
+//     document = document.replace(
+//       `<link href="${url}"`,
+//       `<link data-href="${url}"`
+//     )
+//     document = document.replace(
+//       '</head>',
+//       `<style data-font-url='${url}'>${getFontDefinition(url)}</style></head>`
+//     )
+//     /**
+//      * Removing the actual element is not supported in node-html-parser
+//      * so we just remove the href effectively making it inert.
+//      */
+//     //link.removeAttribute('href')
+//   })
+//   return document
+// }
+
+class RenderPreloads implements PostProcessMiddleware {
+  inspect = (
+    _originalDom: HTMLElement,
+    _data: postProcessData,
+    _options: renderOpts
+  ) => {}
+  mutate = async (
+    markup: string,
+    _data: postProcessData,
+    _options: renderOpts
+  ) => {
+    return markup
+  }
 }
 
 // Initialization
 registerPostProcessor(
   'Find-Images',
-  findImages,
+  new FindImages(),
   (options) => options.preloadImages
 )
 // Initialization
 registerPostProcessor(
   'Inline-Fonts',
-  inlineFonts,
+  new FontOptimizerMiddleware(),
   (options) => options.optimizeFonts || true
 )
 registerPostProcessor(
   'Render-Preloads',
-  renderPreloads,
+  new RenderPreloads(),
   (options) => options.preloadImages
 )
 

From 126f904a22c459338425bc969a90bf456b3ecebe Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Thu, 25 Jun 2020 10:46:08 -0700
Subject: [PATCH 07/49] minifying stylesheets

---
 packages/next/next-server/lib/post-process.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 9a93790ccdf06..ce5cbc3d0241a 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -149,7 +149,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
       result = result.replace(
         '</head>',
         `<style data-href="${key}">${this.fontDefinitions[key].replace(
-          /\n/g,
+          /(\n|\s)/g,
           ''
         )}</style>`
       )

From d5137c39ef521d443b402214cb5134f5df4fed23 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 12:00:47 -0700
Subject: [PATCH 08/49] WIP font-optimization changes

---
 packages/next/build/webpack-config.ts         |  2 +-
 .../webpack/loaders/next-serverless-loader.ts | 12 ++++++++
 .../font-stylesheet-gathering-plugin.ts       | 11 +++++++-
 packages/next/export/worker.ts                | 28 +++++++++++--------
 packages/next/next-server/lib/head.tsx        |  8 ------
 packages/next/next-server/lib/post-process.ts |  3 +-
 .../next/next-server/server/next-server.ts    |  2 +-
 packages/next/next-server/server/require.ts   | 10 +++++--
 packages/next/pages/_document.tsx             | 16 ++++++++++-
 9 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 998a7e23cfc5f..4d983fbdf3246 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -954,7 +954,7 @@ export default async function getBaseWebpackConfig(
               inputChunkName.replace(/\.js$/, '.module.js'),
           })
         })(),
-      !dev && !isServer && new FontStylesheetGatheringPlugin(),
+      !dev && isServer && new FontStylesheetGatheringPlugin(),
       config.experimental.conformance &&
         !dev &&
         new WebpackConformancePlugin({
diff --git a/packages/next/build/webpack/loaders/next-serverless-loader.ts b/packages/next/build/webpack/loaders/next-serverless-loader.ts
index b78825641936b..d9a78c7437810 100644
--- a/packages/next/build/webpack/loaders/next-serverless-loader.ts
+++ b/packages/next/build/webpack/loaders/next-serverless-loader.ts
@@ -251,6 +251,7 @@ const nextServerlessLoader: loader.Loader = function () {
     import initServer from 'next-plugin-loader?middleware=on-init-server!'
     import onError from 'next-plugin-loader?middleware=on-error-server!'
     import 'next/dist/next-server/server/node-polyfill-fetch'
+    import { requireFontManifest } from 'next/dist/next-server/server/require'
     const {isResSent} = require('next/dist/next-server/lib/utils');
 
     ${envLoading}
@@ -401,7 +402,18 @@ const nextServerlessLoader: loader.Loader = function () {
         // make sure to set renderOpts to the correct params e.g. _params
         // if provided from worker or params if we're parsing them here
         renderOpts.params = _params || params
+        renderOpts.getFontDefinition = (fontURL) => {
+          console.log('will dist dirrrr', "${distDir}", "${canonicalBase}", "${basePath}");
+          const manifest = requireFontManifest("${distDir}", true)
+          let fontContent = ''
+          manifest.forEach((font) => {
+            if (font && font.url === fontURL) {
+              fontContent = font.content
+            }
+          })
 
+          return fontContent
+        }
         const isFallback = parsedUrl.query.__nextFallback
 
         const previewData = tryGetPreviewData(req, res, options.previewProps)
diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index ead032ece1dee..8b50a820e21f6 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -26,6 +26,10 @@ export default class FontStylesheetGatheringPlugin {
         .tap(this.constructor.name, (parser) => {
           var that = this
           parser.hooks.program.tap(this.constructor.name, (ast: any) => {
+            // We will only optimize fonts from first party code.
+            if (parser?.state?.module?.resource.includes('node_modules')) {
+              return
+            }
             visit(ast, {
               visitCallExpression: function (path) {
                 const { node }: { node: namedTypes.CallExpression } = path
@@ -50,7 +54,12 @@ export default class FontStylesheetGatheringPlugin {
                     {}
                   )
 
-                  if (!props.href) {
+                  if (
+                    !props.rel ||
+                    props.rel !== 'stylesheet' ||
+                    !props.href ||
+                    !props.href.startsWith('https://')
+                  ) {
                     return false
                   }
                   that.gatheredStylesheets.push(props.href)
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index d33921d16ec55..d8be1d53f961c 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -85,6 +85,18 @@ export default async function exportPage({
     ampValidations: [],
   }
 
+  const getFontDefinition = (fontURL: string) => {
+    const manifest = requireFontManifest(distDir, serverless)
+    let fontContent = ''
+    manifest.forEach((font: any) => {
+      if (font && font.url === fontURL) {
+        fontContent = font.content
+      }
+    })
+
+    return fontContent
+  }
+
   try {
     const { query: originalQuery = {} } = pathMap
     const { page } = pathMap
@@ -215,7 +227,10 @@ export default async function exportPage({
           'export',
           { ampPath },
           // @ts-ignore
-          params
+          {
+            ...params,
+            getFontDefinition,
+          }
         )
         curRenderOpts = result.renderOpts || {}
         html = result.html
@@ -248,17 +263,6 @@ export default async function exportPage({
         html = components.Component
         queryWithAutoExportWarn()
       } else {
-        const getFontDefinition = (fontURL: string) => {
-          const manifest = requireFontManifest(distDir)
-          let fontContent = ''
-          manifest.forEach((font: any) => {
-            if (font && font.url === fontURL) {
-              fontContent = font.content
-            }
-          })
-
-          return fontContent
-        }
         curRenderOpts = {
           ...components,
           ...renderOpts,
diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index f3e759507108e..4b03b2fc05847 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -136,14 +136,6 @@ function reduceComponents(
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
-      if (
-        c.type === 'link' &&
-        c.props['href'] &&
-        c.props['href'].startsWith('https://fonts.googleapis.com/css2?')
-      ) {
-        c.props['data-href'] = c.props['href']
-        delete c.props['href']
-      }
       return React.cloneElement(c, { key })
     })
 }
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index ce5cbc3d0241a..f0287803d7bcb 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -120,6 +120,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
     options: renderOpts
   ) {
     if (!options.getFontDefinition) {
+      console.log('early')
       return
     }
     const getFontDefinition = options.getFontDefinition
@@ -132,7 +133,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
           tag.hasAttribute('data-href') &&
           tag
             .getAttribute('data-href')
-            .startsWith('https://fonts.googleapis.com/css2?')
+            .startsWith('https://fonts.googleapis.com/css')
       )
       .forEach((element: HTMLElement) => {
         const url = element.getAttribute('data-href')
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index e7ca46be2f14d..009b5eeb5e3aa 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -317,7 +317,7 @@ export default class Server {
   }
 
   protected getFontDefinition(url: string): string {
-    requireFontManifest(this.distDir)
+    requireFontManifest(this.distDir, false)
     return url + 'server-blah'
   }
 
diff --git a/packages/next/next-server/server/require.ts b/packages/next/next-server/server/require.ts
index fe34b80f4e146..28fca96a2cbc0 100644
--- a/packages/next/next-server/server/require.ts
+++ b/packages/next/next-server/server/require.ts
@@ -56,7 +56,11 @@ export function requirePage(
   return require(pagePath)
 }
 
-export function requireFontManifest(distDir: string) {
-  const manifest = require(join(distDir, FONT_MANIFEST))
-  return manifest
+export function requireFontManifest(distDir: string, serverless: boolean) {
+  const serverBuildPath = join(
+    distDir,
+    serverless ? SERVERLESS_DIRECTORY : SERVER_DIRECTORY
+  )
+  const fontManifest = require(join(serverBuildPath, FONT_MANIFEST))
+  return fontManifest
 }
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 69019a9bd792e..4a39ba1b89b4b 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -382,7 +382,21 @@ export class Head extends Component<
             </noscript>
           </>
         )}
-        {children}
+
+        {
+          /// @ts-ignore
+          children.map((c) => {
+            if (
+              c.type === 'link' &&
+              c.props['href'] &&
+              c.props['href'].startsWith('https://fonts.googleapis.com/css?')
+            ) {
+              c.props['data-href'] = c.props['href']
+              delete c.props['href']
+            }
+            return c
+          })
+        }
         {head}
         <meta
           name="next-head-count"

From 0f89a6c82be96775121d4f4c603d79fcfa2b2370 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 12:10:03 -0700
Subject: [PATCH 09/49] adding comments

---
 packages/next/pages/_document.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index ed68f06f863f7..b76940aacd637 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -366,17 +366,17 @@ export class Head extends Component<
         )}
 
         {
+          // Remove the fonts stylesheet tag here, this content would be inlined by post process.
           /// @ts-ignore
-          children.map((c) => {
+          children.filter((c) => {
             if (
               c.type === 'link' &&
               c.props['href'] &&
-              c.props['href'].startsWith('https://fonts.googleapis.com/css?')
+              c.props['href'].startsWith('https://fonts.googleapis.com/css')
             ) {
-              c.props['data-href'] = c.props['href']
-              delete c.props['href']
+              return false
             }
-            return c
+            return true
           })
         }
         {head}

From 2f45a7b5aaa6d316a4245d757f0d5e9d6f3cfd1c Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 12:12:06 -0700
Subject: [PATCH 10/49] switching from filter to map

---
 packages/next/pages/_document.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index b76940aacd637..905d06d5511e3 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -368,15 +368,16 @@ export class Head extends Component<
         {
           // Remove the fonts stylesheet tag here, this content would be inlined by post process.
           /// @ts-ignore
-          children.filter((c) => {
+          children.map((c) => {
             if (
               c.type === 'link' &&
               c.props['href'] &&
-              c.props['href'].startsWith('https://fonts.googleapis.com/css')
+              c.props['href'].startsWith('https://fonts.googleapis.com/css?')
             ) {
-              return false
+              c.props['data-href'] = c.props['href']
+              delete c.props['href']
             }
-            return true
+            return c
           })
         }
         {head}

From 6f9e1e7e37669475dae76dbf0769b604430726c6 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 12:26:43 -0700
Subject: [PATCH 11/49] fixing server path

---
 packages/next/next-server/server/next-server.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index 932e697b367dc..463ffc676df04 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -312,9 +312,16 @@ export default class Server {
     return (this._cachedPreviewManifest = manifest)
   }
 
-  protected getFontDefinition(url: string): string {
-    requireFontManifest(this.distDir, false)
-    return url + 'server-blah'
+  protected getFontDefinition(fontURL: string): string {
+    const manifest = requireFontManifest(this.distDir, false)
+    let fontContent = ''
+    manifest.forEach((font: any) => {
+      if (font && font.url === fontURL) {
+        fontContent = font.content
+      }
+    })
+
+    return fontContent
   }
 
   protected getPreviewProps(): __ApiPreviewProps {

From 210a5cf4531635a3acd4364b1e36d94b8326c10e Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 16:01:13 -0700
Subject: [PATCH 12/49] Fixing serverless builds

---
 .../webpack/loaders/next-serverless-loader.ts | 13 ------
 packages/next/export/worker.ts                | 19 ++-------
 packages/next/next-server/lib/head.tsx        |  8 ++++
 packages/next/next-server/lib/post-process.ts | 37 ++++++++--------
 .../next/next-server/server/font-utils.ts     | 42 +++++++++++++++++++
 .../next/next-server/server/next-server.ts    | 17 ++------
 packages/next/next-server/server/render.tsx   | 16 ++++++-
 packages/next/pages/_document.tsx             | 24 ++++++-----
 8 files changed, 103 insertions(+), 73 deletions(-)
 create mode 100644 packages/next/next-server/server/font-utils.ts

diff --git a/packages/next/build/webpack/loaders/next-serverless-loader.ts b/packages/next/build/webpack/loaders/next-serverless-loader.ts
index d9a78c7437810..aef77858e7c43 100644
--- a/packages/next/build/webpack/loaders/next-serverless-loader.ts
+++ b/packages/next/build/webpack/loaders/next-serverless-loader.ts
@@ -251,7 +251,6 @@ const nextServerlessLoader: loader.Loader = function () {
     import initServer from 'next-plugin-loader?middleware=on-init-server!'
     import onError from 'next-plugin-loader?middleware=on-error-server!'
     import 'next/dist/next-server/server/node-polyfill-fetch'
-    import { requireFontManifest } from 'next/dist/next-server/server/require'
     const {isResSent} = require('next/dist/next-server/lib/utils');
 
     ${envLoading}
@@ -402,18 +401,6 @@ const nextServerlessLoader: loader.Loader = function () {
         // make sure to set renderOpts to the correct params e.g. _params
         // if provided from worker or params if we're parsing them here
         renderOpts.params = _params || params
-        renderOpts.getFontDefinition = (fontURL) => {
-          console.log('will dist dirrrr', "${distDir}", "${canonicalBase}", "${basePath}");
-          const manifest = requireFontManifest("${distDir}", true)
-          let fontContent = ''
-          manifest.forEach((font) => {
-            if (font && font.url === fontURL) {
-              fontContent = font.content
-            }
-          })
-
-          return fontContent
-        }
         const isFallback = parsedUrl.query.__nextFallback
 
         const previewData = tryGetPreviewData(req, res, options.previewProps)
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index d8be1d53f961c..fad9c9ad03552 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -14,6 +14,7 @@ import { IncomingMessage, ServerResponse } from 'http'
 import { ComponentType } from 'react'
 import { GetStaticProps } from '../types'
 import { requireFontManifest } from '../next-server/server/require'
+import { FontManifest } from '../next-server/server/font-utils'
 
 const envConfig = require('../next-server/lib/runtime-config')
 
@@ -61,7 +62,7 @@ interface RenderOpts {
   ampSkipValidation?: boolean
   hybridAmp?: boolean
   inAmpMode?: boolean
-  getFontDefinition?: (url: string) => string
+  fontManifest?: FontManifest
 }
 
 type ComponentModule = ComponentType<{}> & {
@@ -85,18 +86,6 @@ export default async function exportPage({
     ampValidations: [],
   }
 
-  const getFontDefinition = (fontURL: string) => {
-    const manifest = requireFontManifest(distDir, serverless)
-    let fontContent = ''
-    manifest.forEach((font: any) => {
-      if (font && font.url === fontURL) {
-        fontContent = font.content
-      }
-    })
-
-    return fontContent
-  }
-
   try {
     const { query: originalQuery = {} } = pathMap
     const { page } = pathMap
@@ -229,7 +218,7 @@ export default async function exportPage({
           // @ts-ignore
           {
             ...params,
-            getFontDefinition,
+            fontManifest: requireFontManifest(distDir, serverless),
           }
         )
         curRenderOpts = result.renderOpts || {}
@@ -268,7 +257,7 @@ export default async function exportPage({
           ...renderOpts,
           ampPath,
           params,
-          getFontDefinition,
+          fontManifest: requireFontManifest(distDir, serverless),
         }
         // @ts-ignore
         html = await renderMethod(req, res, page, query, curRenderOpts)
diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index 4b03b2fc05847..77b10285cd8a6 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -136,6 +136,14 @@ function reduceComponents(
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
+      if (
+        c.type === 'link' &&
+        c.props['href'] &&
+        c.props['href'].startsWith('https://fonts.googleapis.com/css')
+      ) {
+        c.props['data-href'] = c.props['href']
+        delete c.props['href']
+      }
       return React.cloneElement(c, { key })
     })
 }
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index f0287803d7bcb..b9d8f6e185f28 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -7,8 +7,8 @@ type postProcessOptions = {
   optimizeFonts: boolean
 }
 
-type renderOpts = {
-  getFontDefinition?: (url: string) => string
+type renderOptions = {
+  getFontDefinition?: (url: string) => Promise<string>
 }
 
 type postProcessData = {
@@ -21,12 +21,12 @@ interface PostProcessMiddleware {
   inspect: (
     originalDom: HTMLElement,
     data: postProcessData,
-    options: renderOpts
+    options: renderOptions
   ) => void
   mutate: (
     markup: string,
     data: postProcessData,
-    options: renderOpts
+    options: renderOptions
   ) => Promise<string>
 }
 
@@ -48,7 +48,7 @@ function registerPostProcessor(
 
 async function processHTML(
   html: string,
-  data: renderOpts,
+  data: renderOptions,
   options: postProcessOptions
 ): Promise<string> {
   // Don't parse unless there's at least one processor middleware
@@ -96,34 +96,30 @@ class FindImages implements PostProcessMiddleware {
   inspect(
     _originalDom: HTMLElement,
     _data: postProcessData,
-    _options: renderOpts
+    _options: renderOptions
   ) {
     return
   }
   mutate = async (
     markup: string,
     _data: postProcessData,
-    _options: renderOpts
+    _options: renderOptions
   ) => {
     return markup
   }
 }
 
 class FontOptimizerMiddleware implements PostProcessMiddleware {
-  fontDefinitions: {
-    [key: string]: string
-  } = {}
+  fontDefinitions: Array<string> = []
 
   inspect(
     originalDom: HTMLElement,
     _data: postProcessData,
-    options: renderOpts
+    options: renderOptions
   ) {
     if (!options.getFontDefinition) {
-      console.log('early')
       return
     }
-    const getFontDefinition = options.getFontDefinition
     // collecting all the requested font definitions
     originalDom
       .querySelectorAll('link')
@@ -137,19 +133,24 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
       )
       .forEach((element: HTMLElement) => {
         const url = element.getAttribute('data-href')
-        this.fontDefinitions[url] = getFontDefinition(url)
+        this.fontDefinitions.push(url)
       })
   }
   mutate = async (
     markup: string,
     _data: postProcessData,
-    _options: renderOpts
+    options: renderOptions
   ) => {
     let result = markup
+    if (!options.getFontDefinition) {
+      return markup
+    }
     for (const key in this.fontDefinitions) {
+      const url = this.fontDefinitions[key]
+      const fontContent = await options.getFontDefinition(url)
       result = result.replace(
         '</head>',
-        `<style data-href="${key}">${this.fontDefinitions[key].replace(
+        `<style data-href="${url}">${fontContent.replace(
           /(\n|\s)/g,
           ''
         )}</style>`
@@ -205,12 +206,12 @@ class RenderPreloads implements PostProcessMiddleware {
   inspect = (
     _originalDom: HTMLElement,
     _data: postProcessData,
-    _options: renderOpts
+    _options: renderOptions
   ) => {}
   mutate = async (
     markup: string,
     _data: postProcessData,
-    _options: renderOpts
+    _options: renderOptions
   ) => {
     return markup
   }
diff --git a/packages/next/next-server/server/font-utils.ts b/packages/next/next-server/server/font-utils.ts
new file mode 100644
index 0000000000000..df5673636de9c
--- /dev/null
+++ b/packages/next/next-server/server/font-utils.ts
@@ -0,0 +1,42 @@
+const https = require('https')
+
+export type FontManifest = Array<{
+  url: string
+  content: string
+}>
+
+export function getFontDefinitionFromNetwork(url: string): Promise<string> {
+  return new Promise((resolve) => {
+    let rawData: any = ''
+    https.get(
+      url,
+      {
+        headers: {
+          'user-agent':
+            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36',
+        },
+      },
+      (res: any) => {
+        res.on('data', (chunk: any) => {
+          rawData += chunk
+        })
+        res.on('end', () => {
+          resolve(rawData.toString('utf8'))
+        })
+      }
+    )
+  })
+}
+
+export function getFontDefinitionFromManifest(
+  url: string,
+  manifest: FontManifest
+): string {
+  let fontContent = ''
+  manifest.forEach((font: any) => {
+    if (font && font.url === url) {
+      fontContent = font.content
+    }
+  })
+  return fontContent
+}
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index 463ffc676df04..a8fe9dd98c16d 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -64,6 +64,7 @@ import './node-polyfill-fetch'
 import { PagesManifest } from '../../build/webpack/plugins/pages-manifest-plugin'
 import { removePathTrailingSlash } from '../../client/normalize-trailing-slash'
 import getRouteFromAssetPath from '../lib/router/utils/get-route-from-asset-path'
+import { FontManifest } from './font-utils'
 
 const getCustomRouteMatcher = pathMatch(true)
 
@@ -122,7 +123,7 @@ export default class Server {
     basePath: string
     postProcess: boolean
     optimizeFonts: boolean
-    getFontDefinition: (url: string) => string
+    fontManifest: FontManifest
   }
   private compression?: Middleware
   private onErrorMiddleware?: ({ err }: { err: Error }) => Promise<void>
@@ -174,7 +175,7 @@ export default class Server {
       basePath: this.nextConfig.basePath,
       postProcess: this.nextConfig.experimental.postProcessOptimization,
       optimizeFonts: this.nextConfig.experimental.fontOptimization,
-      getFontDefinition: this.getFontDefinition,
+      fontManifest: requireFontManifest(this.distDir, false),
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side
@@ -312,18 +313,6 @@ export default class Server {
     return (this._cachedPreviewManifest = manifest)
   }
 
-  protected getFontDefinition(fontURL: string): string {
-    const manifest = requireFontManifest(this.distDir, false)
-    let fontContent = ''
-    manifest.forEach((font: any) => {
-      if (font && font.url === fontURL) {
-        fontContent = font.content
-      }
-    })
-
-    return fontContent
-  }
-
   protected getPreviewProps(): __ApiPreviewProps {
     return this.getPrerenderManifest().preview
   }
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 2896a8d02bd00..678925526541d 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -46,6 +46,11 @@ import { getPageFiles } from './get-page-files'
 import { LoadComponentsReturnType, ManifestItem } from './load-components'
 import optimizeAmp from './optimize-amp'
 import postProcess from '../lib/post-process'
+import {
+  FontManifest,
+  getFontDefinitionFromManifest,
+  getFontDefinitionFromNetwork,
+} from './font-utils'
 
 function noRouter() {
   const message =
@@ -146,7 +151,7 @@ export type RenderOptsPartial = {
   previewProps: __ApiPreviewProps
   basePath: string
   unstable_runtimeJS?: false
-  getFontDefinition?: (url: string) => string
+  fontManifest?: FontManifest
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial
@@ -273,6 +278,7 @@ export async function renderToHTML(
     pageConfig = {},
     Component,
     buildManifest,
+    fontManifest,
     reactLoadableManifest,
     ErrorDebug,
     getStaticProps,
@@ -282,9 +288,15 @@ export async function renderToHTML(
     params,
     previewProps,
     basePath,
-    getFontDefinition,
   } = renderOpts
 
+  const getFontDefinition = (url: string): Promise<string> => {
+    if (fontManifest) {
+      return Promise.resolve(getFontDefinitionFromManifest(url, fontManifest))
+    }
+    return getFontDefinitionFromNetwork(url)
+  }
+
   const callMiddleware = async (method: string, args: any[], props = false) => {
     let results: any = props ? {} : []
 
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 905d06d5511e3..aff490e9db980 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -368,17 +368,19 @@ export class Head extends Component<
         {
           // Remove the fonts stylesheet tag here, this content would be inlined by post process.
           /// @ts-ignore
-          children.map((c) => {
-            if (
-              c.type === 'link' &&
-              c.props['href'] &&
-              c.props['href'].startsWith('https://fonts.googleapis.com/css?')
-            ) {
-              c.props['data-href'] = c.props['href']
-              delete c.props['href']
-            }
-            return c
-          })
+          children && children.map
+            ? children.map((c) => {
+                if (
+                  c.type === 'link' &&
+                  c.props['href'] &&
+                  c.props['href'].startsWith('https://fonts.googleapis.com/css')
+                ) {
+                  c.props['data-href'] = c.props['href']
+                  delete c.props['href']
+                }
+                return c
+              })
+            : children
         }
         {head}
         <meta

From ca93ebaccb50e7c72255322619e42e77cf6fc4bd Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 16:02:28 -0700
Subject: [PATCH 13/49] reverting unwated change

---
 packages/next/build/webpack/loaders/next-serverless-loader.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/next/build/webpack/loaders/next-serverless-loader.ts b/packages/next/build/webpack/loaders/next-serverless-loader.ts
index aef77858e7c43..b78825641936b 100644
--- a/packages/next/build/webpack/loaders/next-serverless-loader.ts
+++ b/packages/next/build/webpack/loaders/next-serverless-loader.ts
@@ -401,6 +401,7 @@ const nextServerlessLoader: loader.Loader = function () {
         // make sure to set renderOpts to the correct params e.g. _params
         // if provided from worker or params if we're parsing them here
         renderOpts.params = _params || params
+
         const isFallback = parsedUrl.query.__nextFallback
 
         const previewData = tryGetPreviewData(req, res, options.previewProps)

From 0bad5cbbf11549c7deee68925ce94868944eb84d Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 16:28:48 -0700
Subject: [PATCH 14/49] removing commented code

---
 packages/next/next-server/lib/post-process.ts | 42 -------------------
 1 file changed, 42 deletions(-)

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index b9d8f6e185f28..6a8b455081e2c 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -160,48 +160,6 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
   }
 }
 
-// Middleware
-// const inlineFonts: postProcessMiddleware = async (
-//   htmlRoot,
-//   document,
-//   _data,
-//   options
-// ) => {
-//   if (!options.getFontDefinition) {
-//     return htmlRoot
-//   }
-
-//   const getFontDefinition = options.getFontDefinition
-//   const links = htmlRoot
-//     .querySelectorAll('link')
-//     .filter(
-//       (tag) =>
-//         tag.getAttribute('rel') === 'stylesheet' &&
-//         tag.hasAttribute('href') &&
-//         tag
-//           .getAttribute('href')
-//           .startsWith('https://fonts.googleapis.com/css2?')
-//     )
-//   links.forEach((link) => {
-//     const url = link.getAttribute('href')
-//     console.log(document, '...', `<link href="${url}"`)
-//     document = document.replace(
-//       `<link href="${url}"`,
-//       `<link data-href="${url}"`
-//     )
-//     document = document.replace(
-//       '</head>',
-//       `<style data-font-url='${url}'>${getFontDefinition(url)}</style></head>`
-//     )
-//     /**
-//      * Removing the actual element is not supported in node-html-parser
-//      * so we just remove the href effectively making it inert.
-//      */
-//     //link.removeAttribute('href')
-//   })
-//   return document
-// }
-
 class RenderPreloads implements PostProcessMiddleware {
   inspect = (
     _originalDom: HTMLElement,

From 463ca8546fbbd02f4a61b018c0e6d8d01fa02728 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 16:36:38 -0700
Subject: [PATCH 15/49] adding experimental flag

---
 packages/next/build/webpack-config.ts           | 5 ++++-
 packages/next/next-server/server/config.ts      | 3 ++-
 packages/next/next-server/server/next-server.ts | 8 +++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index c237a03a0b65a..4507de991d559 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -961,7 +961,10 @@ export default async function getBaseWebpackConfig(
               inputChunkName.replace(/\.js$/, '.module.js'),
           })
         })(),
-      !dev && isServer && new FontStylesheetGatheringPlugin(),
+      config.experimental.optimizeFonts &&
+        !dev &&
+        isServer &&
+        new FontStylesheetGatheringPlugin(),
       config.experimental.conformance &&
         !dev &&
         new WebpackConformancePlugin({
diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts
index 2a7b378856568..7b20b2a13f50e 100644
--- a/packages/next/next-server/server/config.ts
+++ b/packages/next/next-server/server/config.ts
@@ -53,7 +53,8 @@ const defaultConfig: { [key: string]: any } = {
     workerThreads: false,
     pageEnv: false,
     productionBrowserSourceMaps: false,
-    postProcessOptimize: false,
+    optimizeImages: false,
+    optimizeFonts: false,
   },
   future: {
     excludeDefaultMomentLocales: false,
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index a8fe9dd98c16d..1846538ac20a5 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -173,9 +173,11 @@ export default class Server {
       customServer: customServer === true ? true : undefined,
       ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
       basePath: this.nextConfig.basePath,
-      postProcess: this.nextConfig.experimental.postProcessOptimization,
-      optimizeFonts: this.nextConfig.experimental.fontOptimization,
-      fontManifest: requireFontManifest(this.distDir, false),
+      postProcess: this.nextConfig.experimental.optimizeImages,
+      optimizeFonts: this.nextConfig.experimental.optimizeFonts,
+      fontManifest: this.nextConfig.experimental.optimizeFonts
+        ? requireFontManifest(this.distDir, false)
+        : undefined,
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side

From 004ebcb8025e6114573b3d3dc8633f07da8ddbef Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 16:38:37 -0700
Subject: [PATCH 16/49] code resuability

---
 .../font-stylesheet-gathering-plugin.ts       | 33 +++----------------
 1 file changed, 4 insertions(+), 29 deletions(-)

diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index 8b50a820e21f6..dd0e920427a26 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -4,8 +4,7 @@ import { visit } from 'next/dist/compiled/recast'
 import { compilation as CompilationType, Compiler } from 'webpack'
 import { namedTypes } from 'ast-types'
 import { RawSource } from 'webpack-sources'
-
-const https = require('https')
+import { getFontDefinitionFromNetwork } from '../../../next-server/server/font-utils'
 
 interface VisitorMap {
   [key: string]: (path: NodePath) => void
@@ -83,7 +82,9 @@ export default class FontStylesheetGatheringPlugin {
       compilation.hooks.finishModules.tapAsync(
         this.constructor.name,
         async (_, modulesFinished) => {
-          const allContent = this.gatheredStylesheets.map((url) => getFile(url))
+          const allContent = this.gatheredStylesheets.map((url) =>
+            getFontDefinitionFromNetwork(url)
+          )
           const manifestContent = (await Promise.allSettled(allContent)).map(
             (promise) => promise.value
           )
@@ -110,29 +111,3 @@ function isNodeCreatingLinkElement(node: namedTypes.CallExpression) {
   // Next has pragma: __jsx.
   return callee.name === '__jsx' && componentNode.value === 'link'
 }
-
-function getFile(url: string): Promise<string> {
-  return new Promise((resolve) => {
-    let rawData: any = ''
-    https.get(
-      url,
-      {
-        headers: {
-          'user-agent':
-            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36',
-        },
-      },
-      (res: any) => {
-        res.on('data', (chunk: any) => {
-          rawData += chunk
-        })
-        res.on('end', () => {
-          resolve({
-            url,
-            content: rawData.toString('utf8'),
-          })
-        })
-      }
-    )
-  })
-}

From 6acdce59912e8fa0ac5d03c23285c912174b5128 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 16:40:29 -0700
Subject: [PATCH 17/49] renaming flags

---
 packages/next/next-server/server/render.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 678925526541d..d02ba8718d7c0 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -144,7 +144,7 @@ export type RenderOptsPartial = {
   ampValidator?: (html: string, pathname: string) => Promise<void>
   ampSkipValidation?: boolean
   ampOptimizerConfig?: { [key: string]: any }
-  postProcess: boolean
+  optimizeImages: boolean
   optimizeFonts: boolean
   isDataReq?: boolean
   params?: ParsedUrlQuery

From 2289980174846686ca3d509f2dd5ec7401ca5ac2 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 16:41:01 -0700
Subject: [PATCH 18/49] renaming flags

---
 packages/next/next-server/server/render.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index d02ba8718d7c0..089aa2b345379 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -800,7 +800,7 @@ export async function renderToHTML(
       getFontDefinition,
     },
     {
-      preloadImages: renderOpts.postProcess,
+      preloadImages: renderOpts.optimizeImages,
       optimizeFonts: renderOpts.optimizeFonts,
     }
   )

From 0d0c96dde3488bbc258ac604dd5e4a4c1bf6197c Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 30 Jun 2020 23:58:05 -0700
Subject: [PATCH 19/49] guarding behind a flag

---
 packages/next/export/index.ts                 |  1 +
 packages/next/export/worker.ts                | 10 ++++++++--
 packages/next/next-server/lib/post-process.ts |  2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
index 23d40b0ba0bb7..93cbac6986dfd 100644
--- a/packages/next/export/index.ts
+++ b/packages/next/export/index.ts
@@ -388,6 +388,7 @@ export default async function exportApp(
         subFolders,
         buildExport: options.buildExport,
         serverless: isTargetLikeServerless(nextConfig.target),
+        optimizeFonts: nextConfig.experimental.optimizeFonts,
       })
 
       for (const validation of result.ampValidations || []) {
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index fad9c9ad03552..3cb67d36073a2 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -46,6 +46,7 @@ interface ExportPageInput {
   serverRuntimeConfig: string
   subFolders: string
   serverless: boolean
+  optimizeFonts: boolean
 }
 
 interface ExportPageResults {
@@ -81,6 +82,7 @@ export default async function exportPage({
   serverRuntimeConfig,
   subFolders,
   serverless,
+  optimizeFonts,
 }: ExportPageInput): Promise<ExportPageResults> {
   let results: ExportPageResults = {
     ampValidations: [],
@@ -218,7 +220,9 @@ export default async function exportPage({
           // @ts-ignore
           {
             ...params,
-            fontManifest: requireFontManifest(distDir, serverless),
+            fontManifest: optimizeFonts
+              ? requireFontManifest(distDir, serverless)
+              : undefined,
           }
         )
         curRenderOpts = result.renderOpts || {}
@@ -257,7 +261,9 @@ export default async function exportPage({
           ...renderOpts,
           ampPath,
           params,
-          fontManifest: requireFontManifest(distDir, serverless),
+          fontManifest: optimizeFonts
+            ? requireFontManifest(distDir, serverless)
+            : undefined,
         }
         // @ts-ignore
         html = await renderMethod(req, res, page, query, curRenderOpts)
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 6a8b455081e2c..c54e1d39aebe9 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -185,7 +185,7 @@ registerPostProcessor(
 registerPostProcessor(
   'Inline-Fonts',
   new FontOptimizerMiddleware(),
-  (options) => options.optimizeFonts || true
+  (options) => options.optimizeFonts
 )
 registerPostProcessor(
   'Render-Preloads',

From 45e792959b001fd2eba093d718173d23c25cd869 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 1 Jul 2020 00:18:30 -0700
Subject: [PATCH 20/49] removing Promise.allSettled

---
 .../plugins/font-stylesheet-gathering-plugin.ts  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index dd0e920427a26..d4ad8f575fe4b 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -4,7 +4,10 @@ import { visit } from 'next/dist/compiled/recast'
 import { compilation as CompilationType, Compiler } from 'webpack'
 import { namedTypes } from 'ast-types'
 import { RawSource } from 'webpack-sources'
-import { getFontDefinitionFromNetwork } from '../../../next-server/server/font-utils'
+import {
+  getFontDefinitionFromNetwork,
+  FontManifest,
+} from '../../../next-server/server/font-utils'
 
 interface VisitorMap {
   [key: string]: (path: NodePath) => void
@@ -85,9 +88,14 @@ export default class FontStylesheetGatheringPlugin {
           const allContent = this.gatheredStylesheets.map((url) =>
             getFontDefinitionFromNetwork(url)
           )
-          const manifestContent = (await Promise.allSettled(allContent)).map(
-            (promise) => promise.value
-          )
+          let manifestContent: FontManifest = []
+
+          for (let promiseIndex in allContent) {
+            manifestContent.push({
+              url: this.gatheredStylesheets[promiseIndex],
+              content: await allContent[promiseIndex],
+            })
+          }
           compilation.assets['font-manifest.json'] = new RawSource(
             JSON.stringify(manifestContent, null, '  ')
           )

From 2602b31ba2e3351dafee9faa43ce57025fd47fb9 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Thu, 2 Jul 2020 16:53:23 -0700
Subject: [PATCH 21/49] Bug fixes and adding tests

---
 packages/next/next-server/lib/post-process.ts | 16 ++++---
 packages/next/pages/_document.tsx             | 18 +-------
 .../font-optimization/next.config.js          |  5 +++
 .../font-optimization/pages/_document.js      | 30 +++++++++++++
 .../font-optimization/pages/index.js          | 15 +++++++
 .../font-optimization/test/index.test.js      | 44 +++++++++++++++++++
 6 files changed, 106 insertions(+), 22 deletions(-)
 create mode 100644 test/integration/font-optimization/next.config.js
 create mode 100644 test/integration/font-optimization/pages/_document.js
 create mode 100644 test/integration/font-optimization/pages/index.js
 create mode 100644 test/integration/font-optimization/test/index.test.js

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index c54e1d39aebe9..3c105e02b21b1 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -126,13 +126,18 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
       .filter(
         (tag: HTMLElement) =>
           tag.getAttribute('rel') === 'stylesheet' &&
-          tag.hasAttribute('data-href') &&
-          tag
-            .getAttribute('data-href')
-            .startsWith('https://fonts.googleapis.com/css')
+          ((tag.hasAttribute('data-href') &&
+            tag
+              .getAttribute('data-href')
+              .startsWith('https://fonts.googleapis.com/css')) ||
+            (tag.hasAttribute('href') &&
+              tag
+                .getAttribute('href')
+                .startsWith('https://fonts.googleapis.com/css')))
       )
       .forEach((element: HTMLElement) => {
-        const url = element.getAttribute('data-href')
+        const url =
+          element.getAttribute('data-href') || element.getAttribute('href')
         this.fontDefinitions.push(url)
       })
   }
@@ -147,6 +152,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
     }
     for (const key in this.fontDefinitions) {
       const url = this.fontDefinitions[key]
+      result = result.replace(`href="${url}"`, `data-href="${url}"`)
       const fontContent = await options.getFontDefinition(url)
       result = result.replace(
         '</head>',
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index aff490e9db980..189a3ca2968cf 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -365,23 +365,7 @@ export class Head extends Component<
           </>
         )}
 
-        {
-          // Remove the fonts stylesheet tag here, this content would be inlined by post process.
-          /// @ts-ignore
-          children && children.map
-            ? children.map((c) => {
-                if (
-                  c.type === 'link' &&
-                  c.props['href'] &&
-                  c.props['href'].startsWith('https://fonts.googleapis.com/css')
-                ) {
-                  c.props['data-href'] = c.props['href']
-                  delete c.props['href']
-                }
-                return c
-              })
-            : children
-        }
+        {children}
         {head}
         <meta
           name="next-head-count"
diff --git a/test/integration/font-optimization/next.config.js b/test/integration/font-optimization/next.config.js
new file mode 100644
index 0000000000000..18dd5fac4b1e7
--- /dev/null
+++ b/test/integration/font-optimization/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    optimizeFonts: true,
+  },
+}
diff --git a/test/integration/font-optimization/pages/_document.js b/test/integration/font-optimization/pages/_document.js
new file mode 100644
index 0000000000000..59d8fe75cd4c4
--- /dev/null
+++ b/test/integration/font-optimization/pages/_document.js
@@ -0,0 +1,30 @@
+import * as React from 'react'
+/// @ts-ignore
+import Document, { Main, NextScript, Head } from 'next/document'
+
+export default class MyDocument extends Document {
+  constructor(props) {
+    super(props)
+    const { __NEXT_DATA__, ids } = props
+    if (ids) {
+      __NEXT_DATA__.ids = ids
+    }
+  }
+
+  render() {
+    return (
+      <html>
+        <Head>
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Voces"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/test/integration/font-optimization/pages/index.js b/test/integration/font-optimization/pages/index.js
new file mode 100644
index 0000000000000..f20eca5d2a972
--- /dev/null
+++ b/test/integration/font-optimization/pages/index.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Idk = React.createContext(null)
+
+const Page = () => {
+  return (
+    <div>
+      <Idk.Provider value="hello world">
+        <Idk.Consumer>{(idk) => <p>Value: {idk}</p>}</Idk.Consumer>
+      </Idk.Provider>
+    </div>
+  )
+}
+
+export default Page
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
new file mode 100644
index 0000000000000..2049efef1d7ec
--- /dev/null
+++ b/test/integration/font-optimization/test/index.test.js
@@ -0,0 +1,44 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import {
+  killApp,
+  findPort,
+  nextStart,
+  nextBuild,
+  renderViaHTTP,
+} from 'next-test-utils'
+import fs from 'fs-extra'
+
+jest.setTimeout(1000 * 30)
+
+const appDir = join(__dirname, '../')
+let builtServerPagesDir
+let builtPage
+let appPort
+let app
+
+const fsExists = (file) =>
+  fs
+    .access(file)
+    .then(() => true)
+    .catch(() => false)
+
+describe('Font optimization', () => {
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+    builtServerPagesDir = join(appDir, '.next/server')
+    builtPage = (file) => join(builtServerPagesDir, file)
+  })
+  afterAll(() => killApp(app))
+
+  it('should inline the google fonts', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
+    expect(html).toContain(
+      '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
+    )
+  })
+})

From 5cde0b27ddcf4a81cf44157723ee2acb571bd53c Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Thu, 2 Jul 2020 17:13:01 -0700
Subject: [PATCH 22/49] sending experimental flags

---
 packages/next/export/worker.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 3cb67d36073a2..2da46f7749064 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -63,6 +63,7 @@ interface RenderOpts {
   ampSkipValidation?: boolean
   hybridAmp?: boolean
   inAmpMode?: boolean
+  optimizeFonts?: boolean
   fontManifest?: FontManifest
 }
 
@@ -220,6 +221,7 @@ export default async function exportPage({
           // @ts-ignore
           {
             ...params,
+            optimizeFonts,
             fontManifest: optimizeFonts
               ? requireFontManifest(distDir, serverless)
               : undefined,
@@ -261,6 +263,7 @@ export default async function exportPage({
           ...renderOpts,
           ampPath,
           params,
+          optimizeFonts,
           fontManifest: optimizeFonts
             ? requireFontManifest(distDir, serverless)
             : undefined,

From fcf567cc18566ee244d0aa5b532abd36bc7d1e9b Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Fri, 3 Jul 2020 01:39:56 -0700
Subject: [PATCH 23/49] bug fixes and adding tests

---
 packages/next/next-server/lib/post-process.ts |  4 +--
 .../font-optimization/pages/stars.js          | 26 +++++++++++++++++++
 .../font-optimization/test/index.test.js      | 16 +++++++++++-
 3 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 test/integration/font-optimization/pages/stars.js

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 3c105e02b21b1..388e416974b0b 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -152,14 +152,14 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
     }
     for (const key in this.fontDefinitions) {
       const url = this.fontDefinitions[key]
-      result = result.replace(`href="${url}"`, `data-href="${url}"`)
+      result = result.replace(` href="${url}"`, ` data-href="${url}"`)
       const fontContent = await options.getFontDefinition(url)
       result = result.replace(
         '</head>',
         `<style data-href="${url}">${fontContent.replace(
           /(\n|\s)/g,
           ''
-        )}</style>`
+        )}</style></head>`
       )
     }
     return result
diff --git a/test/integration/font-optimization/pages/stars.js b/test/integration/font-optimization/pages/stars.js
new file mode 100644
index 0000000000000..ce1982e3647e4
--- /dev/null
+++ b/test/integration/font-optimization/pages/stars.js
@@ -0,0 +1,26 @@
+import Head from 'next/head'
+
+function Home({ stars }) {
+  return (
+    <div className="container">
+      <Head>
+        <title>Create Next App</title>
+        <link rel="icon" href="/favicon.ico" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"
+          rel="stylesheet"
+        ></link>
+      </Head>
+
+      <main>
+        <div>Next stars: {stars}</div>
+      </main>
+    </div>
+  )
+}
+
+Home.getInitialProps = async () => {
+  return { stars: Math.random() * 1000 }
+}
+
+export default Home
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 2049efef1d7ec..f4fc747ee8ec8 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -34,11 +34,25 @@ describe('Font optimization', () => {
   })
   afterAll(() => killApp(app))
 
-  it('should inline the google fonts', async () => {
+  it('should inline the google fonts for static pages', async () => {
     const html = await renderViaHTTP(appPort, '/')
     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
     expect(html).toContain(
       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
     )
+    expect(html).toMatch(
+      /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
+    )
+  })
+
+  it('should inline the google fonts for SSR pages', async () => {
+    const html = await renderViaHTTP(appPort, '/stars')
+    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
+    expect(html).toContain(
+      '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
+    )
+    expect(html).toMatch(
+      /<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Roboto:wght@700">.*<\/style>/
+    )
   })
 })

From f70f936e4f2888f0387606dca7fd781b0710dfd7 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Fri, 3 Jul 2020 01:44:17 -0700
Subject: [PATCH 24/49] adding serverless tests

---
 packages/next/pages/_document.tsx                         | 1 -
 .../integration/amphtml-fragment-style/pages/_document.js | 7 ++++++-
 test/integration/amphtml/pages/_document.js               | 7 ++++++-
 .../app-document-import-order/pages/_document.js          | 7 ++++++-
 .../app-document-style-fragment/pages/_document.js        | 7 ++++++-
 test/integration/app-document/pages/_document.js          | 7 ++++++-
 .../invalid-module-document/pages/_document.js            | 7 ++++++-
 .../font-optimization/{ => server}/next.config.js         | 0
 .../font-optimization/{ => server}/pages/_document.js     | 8 ++++++--
 .../font-optimization/{ => server}/pages/index.js         | 2 +-
 .../font-optimization/{ => server}/pages/stars.js         | 2 +-
 test/integration/font-optimization/test/index.test.js     | 2 +-
 test/integration/hydration/pages/_document.js             | 7 ++++++-
 .../invalid-module-document/pages/_document.js            | 7 ++++++-
 .../serverless-runtime-configs/pages/_document.js         | 7 ++++++-
 15 files changed, 63 insertions(+), 15 deletions(-)
 rename test/integration/font-optimization/{ => server}/next.config.js (100%)
 rename test/integration/font-optimization/{ => server}/pages/_document.js (71%)
 rename test/integration/font-optimization/{ => server}/pages/index.js (77%)
 rename test/integration/font-optimization/{ => server}/pages/stars.js (87%)

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 189a3ca2968cf..1e61f6e4f1612 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -364,7 +364,6 @@ export class Head extends Component<
             </noscript>
           </>
         )}
-
         {children}
         {head}
         <meta
diff --git a/test/integration/amphtml-fragment-style/pages/_document.js b/test/integration/amphtml-fragment-style/pages/_document.js
index c2974b99747de..7474df2a61c91 100644
--- a/test/integration/amphtml-fragment-style/pages/_document.js
+++ b/test/integration/amphtml-fragment-style/pages/_document.js
@@ -1,4 +1,9 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+} from '../integration/font-optimization/server/pages/next/document'
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
diff --git a/test/integration/amphtml/pages/_document.js b/test/integration/amphtml/pages/_document.js
index 8abd48381bdc7..6e1c6eeed4280 100644
--- a/test/integration/amphtml/pages/_document.js
+++ b/test/integration/amphtml/pages/_document.js
@@ -1,5 +1,10 @@
 import { useAmp } from 'next/amp'
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+} from '../integration/font-optimization/server/pages/next/document'
 
 const AmpTst = () => {
   const isAmp = useAmp()
diff --git a/test/integration/app-document-import-order/pages/_document.js b/test/integration/app-document-import-order/pages/_document.js
index 7afc0c658c6ba..77478fab8fa10 100644
--- a/test/integration/app-document-import-order/pages/_document.js
+++ b/test/integration/app-document-import-order/pages/_document.js
@@ -1,4 +1,9 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+} from '../integration/font-optimization/server/pages/next/document'
 import sideEffect from '../sideEffectModule'
 
 sideEffect('_document')
diff --git a/test/integration/app-document-style-fragment/pages/_document.js b/test/integration/app-document-style-fragment/pages/_document.js
index 59bcb8c253c64..b6c5b1e645177 100644
--- a/test/integration/app-document-style-fragment/pages/_document.js
+++ b/test/integration/app-document-style-fragment/pages/_document.js
@@ -1,4 +1,9 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+} from '../integration/font-optimization/server/pages/next/document'
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
diff --git a/test/integration/app-document/pages/_document.js b/test/integration/app-document/pages/_document.js
index 72ac1559744f9..4619d026da0d2 100644
--- a/test/integration/app-document/pages/_document.js
+++ b/test/integration/app-document/pages/_document.js
@@ -1,5 +1,10 @@
 import crypto from 'crypto'
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+} from '../integration/font-optimization/server/pages/next/document'
 
 const cspHashOf = (text) => {
   const hash = crypto.createHash('sha256')
diff --git a/test/integration/css-fixtures/invalid-module-document/pages/_document.js b/test/integration/css-fixtures/invalid-module-document/pages/_document.js
index 7bcd5eb23ad07..a666a3c102944 100644
--- a/test/integration/css-fixtures/invalid-module-document/pages/_document.js
+++ b/test/integration/css-fixtures/invalid-module-document/pages/_document.js
@@ -1,4 +1,9 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document'
+import Document, {
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from '../integration/font-optimization/server/pages/next/document'
 import styles from '../styles.module.css'
 
 class MyDocument extends Document {
diff --git a/test/integration/font-optimization/next.config.js b/test/integration/font-optimization/server/next.config.js
similarity index 100%
rename from test/integration/font-optimization/next.config.js
rename to test/integration/font-optimization/server/next.config.js
diff --git a/test/integration/font-optimization/pages/_document.js b/test/integration/font-optimization/server/pages/_document.js
similarity index 71%
rename from test/integration/font-optimization/pages/_document.js
rename to test/integration/font-optimization/server/pages/_document.js
index 59d8fe75cd4c4..936fc44ecf1ab 100644
--- a/test/integration/font-optimization/pages/_document.js
+++ b/test/integration/font-optimization/server/pages/_document.js
@@ -1,6 +1,10 @@
-import * as React from 'react'
+import * as React from '../integration/font-optimization/server/pages/react'
 /// @ts-ignore
-import Document, { Main, NextScript, Head } from 'next/document'
+import Document, {
+  Main,
+  NextScript,
+  Head,
+} from '../integration/font-optimization/server/pages/next/document'
 
 export default class MyDocument extends Document {
   constructor(props) {
diff --git a/test/integration/font-optimization/pages/index.js b/test/integration/font-optimization/server/pages/index.js
similarity index 77%
rename from test/integration/font-optimization/pages/index.js
rename to test/integration/font-optimization/server/pages/index.js
index f20eca5d2a972..2765d1f509ec2 100644
--- a/test/integration/font-optimization/pages/index.js
+++ b/test/integration/font-optimization/server/pages/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from '../integration/font-optimization/server/pages/react'
 
 const Idk = React.createContext(null)
 
diff --git a/test/integration/font-optimization/pages/stars.js b/test/integration/font-optimization/server/pages/stars.js
similarity index 87%
rename from test/integration/font-optimization/pages/stars.js
rename to test/integration/font-optimization/server/pages/stars.js
index ce1982e3647e4..dd0fb5bfd7214 100644
--- a/test/integration/font-optimization/pages/stars.js
+++ b/test/integration/font-optimization/server/pages/stars.js
@@ -1,4 +1,4 @@
-import Head from 'next/head'
+import Head from '../integration/font-optimization/server/pages/next/head'
 
 function Home({ stars }) {
   return (
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index f4fc747ee8ec8..3d3d6589302e4 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -12,7 +12,7 @@ import fs from 'fs-extra'
 
 jest.setTimeout(1000 * 30)
 
-const appDir = join(__dirname, '../')
+const appDir = join(__dirname, '../server')
 let builtServerPagesDir
 let builtPage
 let appPort
diff --git a/test/integration/hydration/pages/_document.js b/test/integration/hydration/pages/_document.js
index d4d66d494410f..ad42fa2924447 100644
--- a/test/integration/hydration/pages/_document.js
+++ b/test/integration/hydration/pages/_document.js
@@ -1,4 +1,9 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document'
+import Document, {
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from '../integration/font-optimization/server/pages/next/document'
 import React from 'react'
 
 class WeddingDocument extends Document {
diff --git a/test/integration/scss-fixtures/invalid-module-document/pages/_document.js b/test/integration/scss-fixtures/invalid-module-document/pages/_document.js
index a14aca67a844d..d38d852ed067f 100644
--- a/test/integration/scss-fixtures/invalid-module-document/pages/_document.js
+++ b/test/integration/scss-fixtures/invalid-module-document/pages/_document.js
@@ -1,4 +1,9 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document'
+import Document, {
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from '../integration/font-optimization/server/pages/next/document'
 import styles from '../styles.module.scss'
 
 class MyDocument extends Document {
diff --git a/test/integration/serverless-runtime-configs/pages/_document.js b/test/integration/serverless-runtime-configs/pages/_document.js
index 6f85bbef1fdb7..d12151ee98c27 100644
--- a/test/integration/serverless-runtime-configs/pages/_document.js
+++ b/test/integration/serverless-runtime-configs/pages/_document.js
@@ -1,4 +1,9 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, {
+  Html,
+  Head,
+  Main,
+  NextScript,
+} from '../integration/font-optimization/server/pages/next/document'
 import getConfig from 'next/config'
 
 const config = getConfig()

From 3ef9d5598772189ca3be6302fb929c8c648a6f1b Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Fri, 3 Jul 2020 02:08:56 -0700
Subject: [PATCH 25/49] minor improvement

---
 packages/next/next-server/lib/post-process.ts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 388e416974b0b..e715f9867f7c1 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -111,7 +111,7 @@ class FindImages implements PostProcessMiddleware {
 
 class FontOptimizerMiddleware implements PostProcessMiddleware {
   fontDefinitions: Array<string> = []
-
+  DOMAIN = 'https://fonts.googleapis.com/css'
   inspect(
     originalDom: HTMLElement,
     _data: postProcessData,
@@ -127,13 +127,9 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
         (tag: HTMLElement) =>
           tag.getAttribute('rel') === 'stylesheet' &&
           ((tag.hasAttribute('data-href') &&
-            tag
-              .getAttribute('data-href')
-              .startsWith('https://fonts.googleapis.com/css')) ||
+            tag.getAttribute('data-href').startsWith(this.DOMAIN)) ||
             (tag.hasAttribute('href') &&
-              tag
-                .getAttribute('href')
-                .startsWith('https://fonts.googleapis.com/css')))
+              tag.getAttribute('href').startsWith(this.DOMAIN)))
       )
       .forEach((element: HTMLElement) => {
         const url =
@@ -191,7 +187,7 @@ registerPostProcessor(
 registerPostProcessor(
   'Inline-Fonts',
   new FontOptimizerMiddleware(),
-  (options) => options.optimizeFonts
+  (options) => options.optimizeFonts || true
 )
 registerPostProcessor(
   'Render-Preloads',

From 98e41c777aded6af89906820a25a6724f044e712 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Fri, 3 Jul 2020 02:33:52 -0700
Subject: [PATCH 26/49] fixing experimental flag

---
 packages/next/build/webpack-config.ts         | 3 +++
 packages/next/next-server/lib/head.tsx        | 1 +
 packages/next/next-server/lib/post-process.ts | 4 +++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 4507de991d559..e187b65e37d5e 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -861,6 +861,9 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_REACT_MODE': JSON.stringify(
           config.experimental.reactMode
         ),
+        'process.env.__OPTIMIZE_FONTS': JSON.stringify(
+          config.experimental.optimizeFonts
+        ),
         'process.env.__NEXT_ROUTER_BASEPATH': JSON.stringify(config.basePath),
         ...(isServer
           ? {
diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index 77b10285cd8a6..bb7cce1cd754e 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -137,6 +137,7 @@ function reduceComponents(
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
       if (
+        process.env.__OPTIMIZE_FONTS &&
         c.type === 'link' &&
         c.props['href'] &&
         c.props['href'].startsWith('https://fonts.googleapis.com/css')
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index e715f9867f7c1..4563ee6f441e4 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -187,7 +187,9 @@ registerPostProcessor(
 registerPostProcessor(
   'Inline-Fonts',
   new FontOptimizerMiddleware(),
-  (options) => options.optimizeFonts || true
+  // Using process.env because passing Experimental flag through loader is not possible.
+  // @ts-ignore
+  (options) => options.optimizeFonts || process.env.__OPTIMIZE_FONTS
 )
 registerPostProcessor(
   'Render-Preloads',

From b8917c574facb523a61b501b641d37471c0f548b Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Sat, 4 Jul 2020 00:26:32 -0700
Subject: [PATCH 27/49] adding tests for serverless apps

---
 .../serverless/next.config.js                 |  6 ++++
 .../serverless/pages/_document.js             | 34 +++++++++++++++++++
 .../serverless/pages/index.js                 | 15 ++++++++
 .../font-optimization/test/index.test.js      | 24 ++++++++++++-
 4 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 test/integration/font-optimization/serverless/next.config.js
 create mode 100644 test/integration/font-optimization/serverless/pages/_document.js
 create mode 100644 test/integration/font-optimization/serverless/pages/index.js

diff --git a/test/integration/font-optimization/serverless/next.config.js b/test/integration/font-optimization/serverless/next.config.js
new file mode 100644
index 0000000000000..9471c59ecd293
--- /dev/null
+++ b/test/integration/font-optimization/serverless/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  experimental: {
+    optimizeFonts: true,
+  },
+  target: 'serverless',
+}
diff --git a/test/integration/font-optimization/serverless/pages/_document.js b/test/integration/font-optimization/serverless/pages/_document.js
new file mode 100644
index 0000000000000..936fc44ecf1ab
--- /dev/null
+++ b/test/integration/font-optimization/serverless/pages/_document.js
@@ -0,0 +1,34 @@
+import * as React from '../integration/font-optimization/server/pages/react'
+/// @ts-ignore
+import Document, {
+  Main,
+  NextScript,
+  Head,
+} from '../integration/font-optimization/server/pages/next/document'
+
+export default class MyDocument extends Document {
+  constructor(props) {
+    super(props)
+    const { __NEXT_DATA__, ids } = props
+    if (ids) {
+      __NEXT_DATA__.ids = ids
+    }
+  }
+
+  render() {
+    return (
+      <html>
+        <Head>
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Voces"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/test/integration/font-optimization/serverless/pages/index.js b/test/integration/font-optimization/serverless/pages/index.js
new file mode 100644
index 0000000000000..2765d1f509ec2
--- /dev/null
+++ b/test/integration/font-optimization/serverless/pages/index.js
@@ -0,0 +1,15 @@
+import React from '../integration/font-optimization/server/pages/react'
+
+const Idk = React.createContext(null)
+
+const Page = () => {
+  return (
+    <div>
+      <Idk.Provider value="hello world">
+        <Idk.Consumer>{(idk) => <p>Value: {idk}</p>}</Idk.Consumer>
+      </Idk.Provider>
+    </div>
+  )
+}
+
+export default Page
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 3d3d6589302e4..a7fef582dfefb 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -24,7 +24,7 @@ const fsExists = (file) =>
     .then(() => true)
     .catch(() => false)
 
-describe('Font optimization', () => {
+describe('Font optimization for SSR apps', () => {
   beforeAll(async () => {
     await nextBuild(appDir)
     appPort = await findPort()
@@ -56,3 +56,25 @@ describe('Font optimization', () => {
     )
   })
 })
+
+describe('Font optimization for serverless apps', () => {
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+    builtServerPagesDir = join(appDir, '.next/serverless')
+    builtPage = (file) => join(builtServerPagesDir, file)
+  })
+  afterAll(() => killApp(app))
+
+  it('should inline the google fonts for static pages', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
+    expect(html).toContain(
+      '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
+    )
+    expect(html).toMatch(
+      /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
+    )
+  })
+})

From 0dabf094bab27316dde90d0710709f7c30c655eb Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Sat, 4 Jul 2020 01:24:56 -0700
Subject: [PATCH 28/49] bug fix and adding tests for serverless

---
 .../next/next-server/server/next-server.ts    |  2 +-
 .../server/pages/_document.js                 |  8 ++-----
 .../font-optimization/server/pages/index.js   | 12 ++---------
 .../font-optimization/server/pages/stars.js   |  4 ++--
 .../serverless/pages/_document.js             |  8 ++-----
 .../serverless/pages/index.js                 | 12 ++---------
 .../font-optimization/test/index.test.js      | 21 +++++++++++--------
 7 files changed, 23 insertions(+), 44 deletions(-)

diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index 1846538ac20a5..feb7b8d3d354f 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -176,7 +176,7 @@ export default class Server {
       postProcess: this.nextConfig.experimental.optimizeImages,
       optimizeFonts: this.nextConfig.experimental.optimizeFonts,
       fontManifest: this.nextConfig.experimental.optimizeFonts
-        ? requireFontManifest(this.distDir, false)
+        ? requireFontManifest(this.distDir, this._isLikeServerless)
         : undefined,
     }
 
diff --git a/test/integration/font-optimization/server/pages/_document.js b/test/integration/font-optimization/server/pages/_document.js
index 936fc44ecf1ab..59d8fe75cd4c4 100644
--- a/test/integration/font-optimization/server/pages/_document.js
+++ b/test/integration/font-optimization/server/pages/_document.js
@@ -1,10 +1,6 @@
-import * as React from '../integration/font-optimization/server/pages/react'
+import * as React from 'react'
 /// @ts-ignore
-import Document, {
-  Main,
-  NextScript,
-  Head,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Main, NextScript, Head } from 'next/document'
 
 export default class MyDocument extends Document {
   constructor(props) {
diff --git a/test/integration/font-optimization/server/pages/index.js b/test/integration/font-optimization/server/pages/index.js
index 2765d1f509ec2..39cf2d1f7b376 100644
--- a/test/integration/font-optimization/server/pages/index.js
+++ b/test/integration/font-optimization/server/pages/index.js
@@ -1,15 +1,7 @@
-import React from '../integration/font-optimization/server/pages/react'
-
-const Idk = React.createContext(null)
+import React from 'react'
 
 const Page = () => {
-  return (
-    <div>
-      <Idk.Provider value="hello world">
-        <Idk.Consumer>{(idk) => <p>Value: {idk}</p>}</Idk.Consumer>
-      </Idk.Provider>
-    </div>
-  )
+  return <div>Hi!</div>
 }
 
 export default Page
diff --git a/test/integration/font-optimization/server/pages/stars.js b/test/integration/font-optimization/server/pages/stars.js
index dd0fb5bfd7214..d38e96c4ea4f7 100644
--- a/test/integration/font-optimization/server/pages/stars.js
+++ b/test/integration/font-optimization/server/pages/stars.js
@@ -1,4 +1,4 @@
-import Head from '../integration/font-optimization/server/pages/next/head'
+import Head from 'next/head'
 
 function Home({ stars }) {
   return (
@@ -7,8 +7,8 @@ function Home({ stars }) {
         <title>Create Next App</title>
         <link rel="icon" href="/favicon.ico" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"
           rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"
         ></link>
       </Head>
 
diff --git a/test/integration/font-optimization/serverless/pages/_document.js b/test/integration/font-optimization/serverless/pages/_document.js
index 936fc44ecf1ab..59d8fe75cd4c4 100644
--- a/test/integration/font-optimization/serverless/pages/_document.js
+++ b/test/integration/font-optimization/serverless/pages/_document.js
@@ -1,10 +1,6 @@
-import * as React from '../integration/font-optimization/server/pages/react'
+import * as React from 'react'
 /// @ts-ignore
-import Document, {
-  Main,
-  NextScript,
-  Head,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Main, NextScript, Head } from 'next/document'
 
 export default class MyDocument extends Document {
   constructor(props) {
diff --git a/test/integration/font-optimization/serverless/pages/index.js b/test/integration/font-optimization/serverless/pages/index.js
index 2765d1f509ec2..39cf2d1f7b376 100644
--- a/test/integration/font-optimization/serverless/pages/index.js
+++ b/test/integration/font-optimization/serverless/pages/index.js
@@ -1,15 +1,7 @@
-import React from '../integration/font-optimization/server/pages/react'
-
-const Idk = React.createContext(null)
+import React from 'react'
 
 const Page = () => {
-  return (
-    <div>
-      <Idk.Provider value="hello world">
-        <Idk.Consumer>{(idk) => <p>Value: {idk}</p>}</Idk.Consumer>
-      </Idk.Provider>
-    </div>
-  )
+  return <div>Hi!</div>
 }
 
 export default Page
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index a7fef582dfefb..3cc62bb56fd9a 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -12,12 +12,6 @@ import fs from 'fs-extra'
 
 jest.setTimeout(1000 * 30)
 
-const appDir = join(__dirname, '../server')
-let builtServerPagesDir
-let builtPage
-let appPort
-let app
-
 const fsExists = (file) =>
   fs
     .access(file)
@@ -25,11 +19,16 @@ const fsExists = (file) =>
     .catch(() => false)
 
 describe('Font optimization for SSR apps', () => {
+  const appDir = join(__dirname, '../server')
+  let builtServerPagesDir
+  let builtPage
+  let appPort
+  let app
   beforeAll(async () => {
     await nextBuild(appDir)
     appPort = await findPort()
     app = await nextStart(appDir, appPort)
-    builtServerPagesDir = join(appDir, '.next/server')
+    builtServerPagesDir = join(appDir, '.next', 'server')
     builtPage = (file) => join(builtServerPagesDir, file)
   })
   afterAll(() => killApp(app))
@@ -58,15 +57,19 @@ describe('Font optimization for SSR apps', () => {
 })
 
 describe('Font optimization for serverless apps', () => {
+  const appDir = join(__dirname, '../serverless')
+  let builtServerPagesDir
+  let builtPage
+  let appPort
+  let app
   beforeAll(async () => {
     await nextBuild(appDir)
     appPort = await findPort()
     app = await nextStart(appDir, appPort)
-    builtServerPagesDir = join(appDir, '.next/serverless')
+    builtServerPagesDir = join(appDir, '.next', 'serverless')
     builtPage = (file) => join(builtServerPagesDir, file)
   })
   afterAll(() => killApp(app))
-
   it('should inline the google fonts for static pages', async () => {
     const html = await renderViaHTTP(appPort, '/')
     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)

From e17d425e4f58906d2e021ffa7cc4ce39b1326a68 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Sat, 4 Jul 2020 17:52:23 -0700
Subject: [PATCH 29/49] uniform logic for inert font stylesheets

---
 packages/next/next-server/lib/head.tsx        | 17 +++++++++--------
 packages/next/next-server/lib/post-process.ts |  9 +++------
 packages/next/pages/_document.tsx             | 15 ++++++++++++++-
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index bb7cce1cd754e..7c577cd42cca3 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -136,14 +136,15 @@ function reduceComponents(
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
-      if (
-        process.env.__OPTIMIZE_FONTS &&
-        c.type === 'link' &&
-        c.props['href'] &&
-        c.props['href'].startsWith('https://fonts.googleapis.com/css')
-      ) {
-        c.props['data-href'] = c.props['href']
-        delete c.props['href']
+      if (process.env.__OPTIMIZE_FONTS) {
+        if (
+          c.type === 'link' &&
+          c.props['href'] &&
+          c.props['href'].startsWith('https://fonts.googleapis.com/css')
+        ) {
+          c.props['data-href'] = c.props['href']
+          delete c.props['href']
+        }
       }
       return React.cloneElement(c, { key })
     })
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 4563ee6f441e4..04c63a61b95ef 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -126,14 +126,11 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
       .filter(
         (tag: HTMLElement) =>
           tag.getAttribute('rel') === 'stylesheet' &&
-          ((tag.hasAttribute('data-href') &&
-            tag.getAttribute('data-href').startsWith(this.DOMAIN)) ||
-            (tag.hasAttribute('href') &&
-              tag.getAttribute('href').startsWith(this.DOMAIN)))
+          tag.hasAttribute('data-href') &&
+          tag.getAttribute('data-href').startsWith(this.DOMAIN)
       )
       .forEach((element: HTMLElement) => {
-        const url =
-          element.getAttribute('data-href') || element.getAttribute('href')
+        const url = element.getAttribute('data-href')
         this.fontDefinitions.push(url)
       })
   }
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 1e61f6e4f1612..9e5f06429d797 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -269,6 +269,20 @@ export class Head extends Component<
         )
     }
 
+    if (process.env.__OPTIMIZE_FONTS) {
+      children = React.Children.map(children, (c: any) => {
+        if (
+          c.type === 'link' &&
+          c.props['href'] &&
+          c.props['href'].startsWith('https://fonts.googleapis.com/css')
+        ) {
+          c.props['data-href'] = c.props['href']
+          delete c.props['href']
+        }
+        return c
+      })
+    }
+
     let hasAmphtmlRel = false
     let hasCanonicalRel = false
 
@@ -276,7 +290,6 @@ export class Head extends Component<
     head = React.Children.map(head || [], (child) => {
       if (!child) return child
       const { type, props } = child
-
       if (inAmpMode) {
         let badProp: string = ''
 

From c397f6c2ff2b18812052110385071a76f156ea3a Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Sat, 4 Jul 2020 18:32:56 -0700
Subject: [PATCH 30/49] sending process.env value to SSR case

---
 packages/next/next-server/lib/post-process.ts   | 4 ++++
 packages/next/next-server/server/next-server.ts | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 04c63a61b95ef..6d7be809a77e1 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -147,6 +147,10 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
       const url = this.fontDefinitions[key]
       result = result.replace(` href="${url}"`, ` data-href="${url}"`)
       const fontContent = await options.getFontDefinition(url)
+      if (result.indexOf(`<style data-href="${url}">`) > -1) {
+        // The font is already optimized and probably the response is cached
+        continue
+      }
       result = result.replace(
         '</head>',
         `<style data-href="${url}">${fontContent.replace(
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index dd3750d3cc591..1477a960e4acf 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -229,6 +229,15 @@ export default class Server {
       ),
       flushToDisk: this.nextConfig.experimental.sprFlushToDisk,
     })
+
+    /**
+     * This sets environment variable to be used at the time of SSR by head.tsx.
+     * Using this from process.env allows targetting both serverless and SSR by calling
+     * `process.env.__OPTIMIZE_FONTS`.
+     * Nit: For serverless/static this is supplied by webpack define plugin.
+     * TODO(prateekbh@): Remove this when experimental.optimizeFonts are being clened up.
+     */
+    process.env.__OPTIMIZE_FONTS = JSON.stringify(this.renderOpts.optimizeFonts)
   }
 
   protected currentPhase(): string {

From 5f7ddd1d0347e9d8fffe95b91d56820a612ef4ec Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Sat, 4 Jul 2020 18:34:38 -0700
Subject: [PATCH 31/49] updating lock file

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index b1cfed256eab1..86207cb3a5f27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15960,7 +15960,7 @@ webpack-sources@1.4.3, webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-s
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@4.43.0, webpack@^4.42.1:
+webpack@4.43.0:
   version "4.43.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"
   integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==

From d2be4436662c7b479fcfb6cc42b8fbab65535e26 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Sat, 4 Jul 2020 18:42:45 -0700
Subject: [PATCH 32/49] type fixes

---
 packages/next/next-server/server/next-server.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index 1477a960e4acf..e807ecdc89329 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -121,7 +121,7 @@ export default class Server {
     customServer?: boolean
     ampOptimizerConfig?: { [key: string]: any }
     basePath: string
-    postProcess: boolean
+    optimizeImages: boolean
     optimizeFonts: boolean
     fontManifest: FontManifest
   }
@@ -170,7 +170,7 @@ export default class Server {
       customServer: customServer === true ? true : undefined,
       ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
       basePath: this.nextConfig.basePath,
-      postProcess: this.nextConfig.experimental.optimizeImages,
+      optimizeImages: this.nextConfig.experimental.optimizeImages,
       optimizeFonts: this.nextConfig.experimental.optimizeFonts,
       fontManifest: this.nextConfig.experimental.optimizeFonts
         ? requireFontManifest(this.distDir, this._isLikeServerless)

From b7cd379d5607bc08d13c7fd992d9c11a64e31576 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Sun, 5 Jul 2020 00:09:59 -0700
Subject: [PATCH 33/49] bug fix in test

---
 test/integration/amphtml-fragment-style/pages/_document.js | 7 +------
 test/integration/amphtml/pages/_document.js                | 7 +------
 .../app-document-import-order/pages/_document.js           | 7 +------
 .../app-document-style-fragment/pages/_document.js         | 7 +------
 test/integration/app-document/pages/_document.js           | 7 +------
 .../invalid-module-document/pages/_document.js             | 7 +------
 test/integration/hydration/pages/_document.js              | 7 +------
 .../invalid-module-document/pages/_document.js             | 7 +------
 .../serverless-runtime-configs/pages/_document.js          | 7 +------
 9 files changed, 9 insertions(+), 54 deletions(-)

diff --git a/test/integration/amphtml-fragment-style/pages/_document.js b/test/integration/amphtml-fragment-style/pages/_document.js
index 7474df2a61c91..c2974b99747de 100644
--- a/test/integration/amphtml-fragment-style/pages/_document.js
+++ b/test/integration/amphtml-fragment-style/pages/_document.js
@@ -1,9 +1,4 @@
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
diff --git a/test/integration/amphtml/pages/_document.js b/test/integration/amphtml/pages/_document.js
index 6e1c6eeed4280..8abd48381bdc7 100644
--- a/test/integration/amphtml/pages/_document.js
+++ b/test/integration/amphtml/pages/_document.js
@@ -1,10 +1,5 @@
 import { useAmp } from 'next/amp'
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 const AmpTst = () => {
   const isAmp = useAmp()
diff --git a/test/integration/app-document-import-order/pages/_document.js b/test/integration/app-document-import-order/pages/_document.js
index 77478fab8fa10..7afc0c658c6ba 100644
--- a/test/integration/app-document-import-order/pages/_document.js
+++ b/test/integration/app-document-import-order/pages/_document.js
@@ -1,9 +1,4 @@
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import sideEffect from '../sideEffectModule'
 
 sideEffect('_document')
diff --git a/test/integration/app-document-style-fragment/pages/_document.js b/test/integration/app-document-style-fragment/pages/_document.js
index b6c5b1e645177..59bcb8c253c64 100644
--- a/test/integration/app-document-style-fragment/pages/_document.js
+++ b/test/integration/app-document-style-fragment/pages/_document.js
@@ -1,9 +1,4 @@
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
diff --git a/test/integration/app-document/pages/_document.js b/test/integration/app-document/pages/_document.js
index 4619d026da0d2..72ac1559744f9 100644
--- a/test/integration/app-document/pages/_document.js
+++ b/test/integration/app-document/pages/_document.js
@@ -1,10 +1,5 @@
 import crypto from 'crypto'
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 const cspHashOf = (text) => {
   const hash = crypto.createHash('sha256')
diff --git a/test/integration/css-fixtures/invalid-module-document/pages/_document.js b/test/integration/css-fixtures/invalid-module-document/pages/_document.js
index a666a3c102944..7bcd5eb23ad07 100644
--- a/test/integration/css-fixtures/invalid-module-document/pages/_document.js
+++ b/test/integration/css-fixtures/invalid-module-document/pages/_document.js
@@ -1,9 +1,4 @@
-import Document, {
-  Head,
-  Html,
-  Main,
-  NextScript,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Head, Html, Main, NextScript } from 'next/document'
 import styles from '../styles.module.css'
 
 class MyDocument extends Document {
diff --git a/test/integration/hydration/pages/_document.js b/test/integration/hydration/pages/_document.js
index ad42fa2924447..d4d66d494410f 100644
--- a/test/integration/hydration/pages/_document.js
+++ b/test/integration/hydration/pages/_document.js
@@ -1,9 +1,4 @@
-import Document, {
-  Head,
-  Html,
-  Main,
-  NextScript,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Head, Html, Main, NextScript } from 'next/document'
 import React from 'react'
 
 class WeddingDocument extends Document {
diff --git a/test/integration/scss-fixtures/invalid-module-document/pages/_document.js b/test/integration/scss-fixtures/invalid-module-document/pages/_document.js
index d38d852ed067f..a14aca67a844d 100644
--- a/test/integration/scss-fixtures/invalid-module-document/pages/_document.js
+++ b/test/integration/scss-fixtures/invalid-module-document/pages/_document.js
@@ -1,9 +1,4 @@
-import Document, {
-  Head,
-  Html,
-  Main,
-  NextScript,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Head, Html, Main, NextScript } from 'next/document'
 import styles from '../styles.module.scss'
 
 class MyDocument extends Document {
diff --git a/test/integration/serverless-runtime-configs/pages/_document.js b/test/integration/serverless-runtime-configs/pages/_document.js
index d12151ee98c27..6f85bbef1fdb7 100644
--- a/test/integration/serverless-runtime-configs/pages/_document.js
+++ b/test/integration/serverless-runtime-configs/pages/_document.js
@@ -1,9 +1,4 @@
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-} from '../integration/font-optimization/server/pages/next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 import getConfig from 'next/config'
 
 const config = getConfig()

From 05cc713f7d45b660e224e74e41026e507b4160dd Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Mon, 6 Jul 2020 00:07:20 -0700
Subject: [PATCH 34/49] bug fixes

---
 packages/next/next-server/lib/post-process.ts | 52 ++-----------------
 packages/next/next-server/server/config.ts    |  1 -
 .../next/next-server/server/next-server.ts    |  8 +--
 packages/next/next-server/server/render.tsx   |  6 ++-
 packages/next/pages/_document.tsx             | 34 +++++++-----
 5 files changed, 35 insertions(+), 66 deletions(-)

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 6d7be809a77e1..b16ea1e5ab339 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -3,7 +3,6 @@ import { parse, HTMLElement } from 'node-html-parser'
 const MIDDLEWARE_TIME_BUDGET = 10
 
 type postProcessOptions = {
-  preloadImages: boolean
   optimizeFonts: boolean
 }
 
@@ -69,11 +68,14 @@ async function processHTML(
   ) {
     let timer = Date.now()
     middleware.inspect(root, postProcessData, data)
+    const inspectTime = Date.now() - timer
     document = await middleware.mutate(document, postProcessData, data)
     timer = Date.now() - timer
     if (timer > MIDDLEWARE_TIME_BUDGET) {
       console.warn(
-        `The postprocess middleware "${name}" took ${timer}ms to complete. This is longer than the ${MIDDLEWARE_TIME_BUDGET} limit.`
+        `The postprocess middleware "${name}" took ${timer}ms(${inspectTime}, ${
+          timer - inspectTime
+        }) to complete. This is longer than the ${MIDDLEWARE_TIME_BUDGET} limit.`
       )
     }
     return
@@ -92,23 +94,6 @@ async function processHTML(
   return document
 }
 
-class FindImages implements PostProcessMiddleware {
-  inspect(
-    _originalDom: HTMLElement,
-    _data: postProcessData,
-    _options: renderOptions
-  ) {
-    return
-  }
-  mutate = async (
-    markup: string,
-    _data: postProcessData,
-    _options: renderOptions
-  ) => {
-    return markup
-  }
-}
-
 class FontOptimizerMiddleware implements PostProcessMiddleware {
   fontDefinitions: Array<string> = []
   DOMAIN = 'https://fonts.googleapis.com/css'
@@ -145,12 +130,11 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
     }
     for (const key in this.fontDefinitions) {
       const url = this.fontDefinitions[key]
-      result = result.replace(` href="${url}"`, ` data-href="${url}"`)
-      const fontContent = await options.getFontDefinition(url)
       if (result.indexOf(`<style data-href="${url}">`) > -1) {
         // The font is already optimized and probably the response is cached
         continue
       }
+      const fontContent = await options.getFontDefinition(url)
       result = result.replace(
         '</head>',
         `<style data-href="${url}">${fontContent.replace(
@@ -163,27 +147,6 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
   }
 }
 
-class RenderPreloads implements PostProcessMiddleware {
-  inspect = (
-    _originalDom: HTMLElement,
-    _data: postProcessData,
-    _options: renderOptions
-  ) => {}
-  mutate = async (
-    markup: string,
-    _data: postProcessData,
-    _options: renderOptions
-  ) => {
-    return markup
-  }
-}
-
-// Initialization
-registerPostProcessor(
-  'Find-Images',
-  new FindImages(),
-  (options) => options.preloadImages
-)
 // Initialization
 registerPostProcessor(
   'Inline-Fonts',
@@ -192,10 +155,5 @@ registerPostProcessor(
   // @ts-ignore
   (options) => options.optimizeFonts || process.env.__OPTIMIZE_FONTS
 )
-registerPostProcessor(
-  'Render-Preloads',
-  new RenderPreloads(),
-  (options) => options.preloadImages
-)
 
 export default processHTML
diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts
index 7b20b2a13f50e..7abd269ca3c00 100644
--- a/packages/next/next-server/server/config.ts
+++ b/packages/next/next-server/server/config.ts
@@ -53,7 +53,6 @@ const defaultConfig: { [key: string]: any } = {
     workerThreads: false,
     pageEnv: false,
     productionBrowserSourceMaps: false,
-    optimizeImages: false,
     optimizeFonts: false,
   },
   future: {
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index e807ecdc89329..431d82ac8ba28 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -121,7 +121,6 @@ export default class Server {
     customServer?: boolean
     ampOptimizerConfig?: { [key: string]: any }
     basePath: string
-    optimizeImages: boolean
     optimizeFonts: boolean
     fontManifest: FontManifest
   }
@@ -170,7 +169,6 @@ export default class Server {
       customServer: customServer === true ? true : undefined,
       ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
       basePath: this.nextConfig.basePath,
-      optimizeImages: this.nextConfig.experimental.optimizeImages,
       optimizeFonts: this.nextConfig.experimental.optimizeFonts,
       fontManifest: this.nextConfig.experimental.optimizeFonts
         ? requireFontManifest(this.distDir, this._isLikeServerless)
@@ -1040,7 +1038,10 @@ export default class Server {
           renderResult = await (components.Component as any).renderReqToHTML(
             req,
             res,
-            'passthrough'
+            'passthrough',
+            {
+              fontManifest: this.renderOpts.fontManifest,
+            }
           )
 
           html = renderResult.html
@@ -1052,6 +1053,7 @@ export default class Server {
             ...opts,
             isDataReq,
           }
+
           renderResult = await renderToHTML(
             req,
             res,
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 235ddf882b9a6..85bc0101dcf49 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -144,7 +144,6 @@ export type RenderOptsPartial = {
   ampValidator?: (html: string, pathname: string) => Promise<void>
   ampSkipValidation?: boolean
   ampOptimizerConfig?: { [key: string]: any }
-  optimizeImages: boolean
   optimizeFonts: boolean
   isDataReq?: boolean
   params?: ParsedUrlQuery
@@ -294,6 +293,10 @@ export async function renderToHTML(
     if (fontManifest) {
       return Promise.resolve(getFontDefinitionFromManifest(url, fontManifest))
     }
+    /**
+     * Markup for static files in serverless build are generated via webpack loader.
+     * By that time the font manifest is not created thus the font definition is requested via network.
+     */
     return getFontDefinitionFromNetwork(url)
   }
 
@@ -801,7 +804,6 @@ export async function renderToHTML(
       getFontDefinition,
     },
     {
-      preloadImages: renderOpts.optimizeImages,
       optimizeFonts: renderOpts.optimizeFonts,
     }
   )
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 9e5f06429d797..36e46da3322b5 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useContext, Component } from 'react'
+import React, { useContext, Component, ReactNode } from 'react'
 import flush from 'styled-jsx/server'
 import { AMP_RENDER_TARGET } from '../next-server/lib/constants'
 import { DocumentContext as DocumentComponentContext } from '../next-server/lib/document-context'
@@ -236,6 +236,22 @@ export class Head extends Component<
         ))
   }
 
+  makeStylesheetInert(node: ReactNode): ReactNode {
+    return React.Children.map(node, (c: any) => {
+      if (
+        c.type === 'link' &&
+        c.props['href'] &&
+        c.props['href'].startsWith('https://fonts.googleapis.com/css')
+      ) {
+        c.props['data-href'] = c.props['href']
+        delete c.props['href']
+      } else if (c.props && c.props['children']) {
+        c.props['children'] = this.makeStylesheetInert(c.props['children'])
+      }
+      return c
+    })
+  }
+
   render() {
     const {
       styles,
@@ -270,17 +286,7 @@ export class Head extends Component<
     }
 
     if (process.env.__OPTIMIZE_FONTS) {
-      children = React.Children.map(children, (c: any) => {
-        if (
-          c.type === 'link' &&
-          c.props['href'] &&
-          c.props['href'].startsWith('https://fonts.googleapis.com/css')
-        ) {
-          c.props['data-href'] = c.props['href']
-          delete c.props['href']
-        }
-        return c
-      })
+      children = this.makeStylesheetInert(children)
     }
 
     let hasAmphtmlRel = false
@@ -439,7 +445,9 @@ export class Head extends Component<
                 href={canonicalBase + getAmpPath(ampPath, dangerousAsPath)}
               />
             )}
-            {this.getCssLinks()}
+            {process.env.__OPTIMIZE_FONTS
+              ? this.makeStylesheetInert(this.getCssLinks())
+              : this.getCssLinks()}
             {!disableRuntimeJS && this.getPreloadDynamicChunks()}
             {!disableRuntimeJS && this.getPreloadMainLinks()}
             {this.context._documentProps.isDevelopment && (

From dc83f9d7adc1d6ce838d0706d5fc1e97b7508de8 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Mon, 6 Jul 2020 01:28:56 -0700
Subject: [PATCH 35/49] fixing serializable value bug

---
 packages/next/export/worker.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 2da46f7749064..77d9815d4454e 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -224,7 +224,7 @@ export default async function exportPage({
             optimizeFonts,
             fontManifest: optimizeFonts
               ? requireFontManifest(distDir, serverless)
-              : undefined,
+              : null,
           }
         )
         curRenderOpts = result.renderOpts || {}
@@ -266,7 +266,7 @@ export default async function exportPage({
           optimizeFonts,
           fontManifest: optimizeFonts
             ? requireFontManifest(distDir, serverless)
-            : undefined,
+            : null,
         }
         // @ts-ignore
         html = await renderMethod(req, res, page, query, curRenderOpts)

From 1e23ca385a474c3bc60940cebd466bbe07350971 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Mon, 6 Jul 2020 01:50:08 -0700
Subject: [PATCH 36/49] vanity changes

---
 packages/next/next-server/server/next-server.ts | 3 +--
 packages/next/next-server/server/render.tsx     | 2 +-
 packages/next/package.json                      | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index 431d82ac8ba28..10a700a1d42a4 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -172,7 +172,7 @@ export default class Server {
       optimizeFonts: this.nextConfig.experimental.optimizeFonts,
       fontManifest: this.nextConfig.experimental.optimizeFonts
         ? requireFontManifest(this.distDir, this._isLikeServerless)
-        : undefined,
+        : null,
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side
@@ -1053,7 +1053,6 @@ export default class Server {
             ...opts,
             isDataReq,
           }
-
           renderResult = await renderToHTML(
             req,
             res,
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 85bc0101dcf49..4d5ea19533bf8 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -144,12 +144,12 @@ export type RenderOptsPartial = {
   ampValidator?: (html: string, pathname: string) => Promise<void>
   ampSkipValidation?: boolean
   ampOptimizerConfig?: { [key: string]: any }
-  optimizeFonts: boolean
   isDataReq?: boolean
   params?: ParsedUrlQuery
   previewProps: __ApiPreviewProps
   basePath: string
   unstable_runtimeJS?: false
+  optimizeFonts: boolean
   fontManifest?: FontManifest
 }
 
diff --git a/packages/next/package.json b/packages/next/package.json
index b68a4fd6fe3fe..6b1231fac8182 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -78,7 +78,6 @@
     "@babel/types": "7.9.6",
     "@next/react-dev-overlay": "9.4.5-canary.28",
     "@next/react-refresh-utils": "9.4.5-canary.28",
-    "ast-types": "0.13.2",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
@@ -159,6 +158,7 @@
     "@zeit/ncc": "0.22.0",
     "amphtml-validator": "1.0.31",
     "arg": "4.1.0",
+    "ast-types": "0.13.2",
     "async-retry": "1.2.3",
     "async-sema": "3.0.0",
     "babel-loader": "8.1.0",

From 97f89fe485e7480599a1b339d7696b2c294f92bd Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Mon, 6 Jul 2020 12:53:13 -0700
Subject: [PATCH 37/49] query bug fixes

---
 packages/next/export/worker.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 77d9815d4454e..5ec614cd5d4db 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -217,15 +217,16 @@ export default async function exportPage({
           req,
           res,
           'export',
-          { ampPath },
-          // @ts-ignore
           {
-            ...params,
+            ampPath,
+            /// @ts-ignore
             optimizeFonts,
             fontManifest: optimizeFonts
               ? requireFontManifest(distDir, serverless)
               : null,
-          }
+          },
+          // @ts-ignore
+          params
         )
         curRenderOpts = result.renderOpts || {}
         html = result.html

From 3eaade22a960544fbb22026cf770905ea69df1cc Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Mon, 6 Jul 2020 13:15:19 -0700
Subject: [PATCH 38/49] moving ast types to dep

---
 packages/next/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next/package.json b/packages/next/package.json
index 6b1231fac8182..b68a4fd6fe3fe 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -78,6 +78,7 @@
     "@babel/types": "7.9.6",
     "@next/react-dev-overlay": "9.4.5-canary.28",
     "@next/react-refresh-utils": "9.4.5-canary.28",
+    "ast-types": "0.13.2",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
@@ -158,7 +159,6 @@
     "@zeit/ncc": "0.22.0",
     "amphtml-validator": "1.0.31",
     "arg": "4.1.0",
-    "ast-types": "0.13.2",
     "async-retry": "1.2.3",
     "async-sema": "3.0.0",
     "babel-loader": "8.1.0",

From 6000faecac287725e9b4d846084cb1cdca96029f Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 7 Jul 2020 10:52:50 -0700
Subject: [PATCH 39/49] shifting font urls to a constant

---
 packages/next/next-server/lib/constants.ts    | 1 +
 packages/next/next-server/lib/head.tsx        | 5 ++++-
 packages/next/next-server/lib/post-process.ts | 6 ++++--
 packages/next/pages/_document.tsx             | 7 +++++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/next/next-server/lib/constants.ts b/packages/next/next-server/lib/constants.ts
index d88b515ae822b..a6f28403057a8 100644
--- a/packages/next/next-server/lib/constants.ts
+++ b/packages/next/next-server/lib/constants.ts
@@ -35,3 +35,4 @@ export const TEMPORARY_REDIRECT_STATUS = 307
 export const PERMANENT_REDIRECT_STATUS = 308
 export const STATIC_PROPS_ID = '__N_SSG'
 export const SERVER_PROPS_ID = '__N_SSP'
+export const OPTIMIZED_FONT_PROVIDERS = ['https://fonts.googleapis.com/css']
diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index 7c577cd42cca3..be1b93591c196 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -3,6 +3,7 @@ import Effect from './side-effect'
 import { AmpStateContext } from './amp-context'
 import { HeadManagerContext } from './head-manager-context'
 import { isInAmpMode } from './amp'
+import { OPTIMIZED_FONT_PROVIDERS } from './constants'
 
 type WithInAmpMode = {
   inAmpMode?: boolean
@@ -140,7 +141,9 @@ function reduceComponents(
         if (
           c.type === 'link' &&
           c.props['href'] &&
-          c.props['href'].startsWith('https://fonts.googleapis.com/css')
+          OPTIMIZED_FONT_PROVIDERS.some((url) =>
+            c.props['href'].startsWith(url)
+          )
         ) {
           c.props['data-href'] = c.props['href']
           delete c.props['href']
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index b16ea1e5ab339..2d6216830b60d 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -1,4 +1,5 @@
 import { parse, HTMLElement } from 'node-html-parser'
+import { OPTIMIZED_FONT_PROVIDERS } from './constants'
 
 const MIDDLEWARE_TIME_BUDGET = 10
 
@@ -96,7 +97,6 @@ async function processHTML(
 
 class FontOptimizerMiddleware implements PostProcessMiddleware {
   fontDefinitions: Array<string> = []
-  DOMAIN = 'https://fonts.googleapis.com/css'
   inspect(
     originalDom: HTMLElement,
     _data: postProcessData,
@@ -112,7 +112,9 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
         (tag: HTMLElement) =>
           tag.getAttribute('rel') === 'stylesheet' &&
           tag.hasAttribute('data-href') &&
-          tag.getAttribute('data-href').startsWith(this.DOMAIN)
+          OPTIMIZED_FONT_PROVIDERS.some((url) =>
+            tag.getAttribute('data-href').startsWith(url)
+          )
       )
       .forEach((element: HTMLElement) => {
         const url = element.getAttribute('data-href')
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 36e46da3322b5..47dcccf02daac 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -1,7 +1,10 @@
 import PropTypes from 'prop-types'
 import React, { useContext, Component, ReactNode } from 'react'
 import flush from 'styled-jsx/server'
-import { AMP_RENDER_TARGET } from '../next-server/lib/constants'
+import {
+  AMP_RENDER_TARGET,
+  OPTIMIZED_FONT_PROVIDERS,
+} from '../next-server/lib/constants'
 import { DocumentContext as DocumentComponentContext } from '../next-server/lib/document-context'
 import {
   DocumentContext,
@@ -241,7 +244,7 @@ export class Head extends Component<
       if (
         c.type === 'link' &&
         c.props['href'] &&
-        c.props['href'].startsWith('https://fonts.googleapis.com/css')
+        OPTIMIZED_FONT_PROVIDERS.some((url) => c.props['href'].startsWith(url))
       ) {
         c.props['data-href'] = c.props['href']
         delete c.props['href']

From 20ab602333d8a296274b5fecb20fd56d2a2bedbf Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Tue, 7 Jul 2020 15:34:42 -0700
Subject: [PATCH 40/49] removing dependency from recast

---
 .../font-stylesheet-gathering-plugin.ts       | 101 ++++++++++--------
 1 file changed, 58 insertions(+), 43 deletions(-)

diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index d4ad8f575fe4b..17c32a78158cb 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -1,6 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { NodePath } from 'ast-types/lib/node-path'
-import { visit } from 'next/dist/compiled/recast'
 import { compilation as CompilationType, Compiler } from 'webpack'
 import { namedTypes } from 'ast-types'
 import { RawSource } from 'webpack-sources'
@@ -8,6 +7,9 @@ import {
   getFontDefinitionFromNetwork,
   FontManifest,
 } from '../../../next-server/server/font-utils'
+// @ts-ignore
+import BasicEvaluatedExpression from 'webpack/lib/BasicEvaluatedExpression'
+import { OPTIMIZED_FONT_PROVIDERS } from '../../../next-server/lib/constants'
 
 interface VisitorMap {
   [key: string]: (path: NodePath) => void
@@ -26,51 +28,64 @@ export default class FontStylesheetGatheringPlugin {
       factory.hooks.parser
         .for('javascript/' + type)
         .tap(this.constructor.name, (parser) => {
-          var that = this
-          parser.hooks.program.tap(this.constructor.name, (ast: any) => {
-            // We will only optimize fonts from first party code.
-            if (parser?.state?.module?.resource.includes('node_modules')) {
-              return
-            }
-            visit(ast, {
-              visitCallExpression: function (path) {
-                const { node }: { node: namedTypes.CallExpression } = path
-                if (!node.arguments || node.arguments.length < 2) {
-                  return false
-                }
-                if (isNodeCreatingLinkElement(node)) {
-                  const propsNode = node
-                    .arguments[1] as namedTypes.ObjectExpression
-                  if (!propsNode.properties) {
-                    return false
-                  }
-                  const props: {
-                    [key: string]: string
-                  } = propsNode.properties.reduce(
-                    (originalProps, prop: any) => {
-                      // todo check the type of prop
-                      // @ts-ignore
-                      originalProps[prop.key.name] = prop.value.value
-                      return originalProps
-                    },
-                    {}
-                  )
+          /**
+           * Webpack fun facts:
+           * `parser.hooks.call.for` cannot catch calls for user defined identifiers like `__jsx`
+           * it can only detect calls for native objects like `window`, `this`, `eval` etc.
+           * In order to be able to catch calls of variables like `__jsx`, first we need to catch them as
+           * Identifier and then return `BasicEvaluatedExpression` whose `id` and `type` webpack matches to
+           * invoke hook for call.
+           * See: https://github.com/webpack/webpack/blob/webpack-4/lib/Parser.js#L1931-L1932.
+           */
+          parser.hooks.evaluate
+            .for('Identifier')
+            .tap(this.constructor.name, (node: namedTypes.Identifier) => {
+              return node.name === '__jsx'
+                ? new BasicEvaluatedExpression()
+                    //@ts-ignore
+                    .setRange(node.range)
+                    .setExpression(node)
+                    .setIdentifier('__jsx')
+                : undefined
+            })
+
+          parser.hooks.call
+            .for('__jsx')
+            .tap(this.constructor.name, (node: namedTypes.CallExpression) => {
+              // We will only optimize fonts from first party code.
+              if (parser?.state?.module?.resource.includes('node_modules')) {
+                return
+              }
+              if (node.arguments.length !== 2) {
+                // A font link tag has only two arguments rel=stylesheet and href='...'
+                return
+              }
+              if (!isNodeCreatingLinkElement(node)) {
+                return
+              }
 
-                  if (
-                    !props.rel ||
-                    props.rel !== 'stylesheet' ||
-                    !props.href ||
-                    !props.href.startsWith('https://')
-                  ) {
-                    return false
-                  }
-                  that.gatheredStylesheets.push(props.href)
-                }
-                this.traverse(path)
+              const propsNode = node.arguments[1] as namedTypes.ObjectExpression
+              const props: {
+                [key: string]: string
+              } = propsNode.properties.reduce((originalProps, prop: any) => {
+                // todo check the type of prop
+                // @ts-ignore
+                originalProps[prop.key.name] = prop.value.value
+                return originalProps
+              }, {})
+              if (
+                !props.rel ||
+                props.rel !== 'stylesheet' ||
+                !props.href ||
+                !OPTIMIZED_FONT_PROVIDERS.some((url) =>
+                  props.href.startsWith(url)
+                )
+              ) {
                 return false
-              },
+              }
+
+              this.gatheredStylesheets.push(props.href)
             })
-          })
         })
     }
   }

From cb5e3200a4ee5fe5651888e1c781475cda1a07b4 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 8 Jul 2020 00:13:36 -0700
Subject: [PATCH 41/49] fixing flag name and adding tests

---
 packages/next/build/webpack-config.ts         |  2 +-
 packages/next/export/worker.ts                |  9 +++
 packages/next/next-server/lib/head.tsx        |  2 +-
 packages/next/next-server/lib/post-process.ts |  2 +-
 .../next/next-server/server/next-server.ts    |  7 +-
 packages/next/pages/_document.tsx             |  4 +-
 .../font-optimization/next.config.js          |  1 +
 .../{server => }/pages/_document.js           |  0
 .../{server => }/pages/index.js               |  0
 .../{server => }/pages/stars.js               |  0
 .../font-optimization/pages/static-head.js    | 18 +++++
 .../font-optimization/server/next.config.js   |  5 --
 .../serverless/next.config.js                 |  6 --
 .../serverless/pages/_document.js             | 30 --------
 .../serverless/pages/index.js                 |  7 --
 .../font-optimization/test/index.test.js      | 72 +++++++++++--------
 16 files changed, 79 insertions(+), 86 deletions(-)
 create mode 100644 test/integration/font-optimization/next.config.js
 rename test/integration/font-optimization/{server => }/pages/_document.js (100%)
 rename test/integration/font-optimization/{server => }/pages/index.js (100%)
 rename test/integration/font-optimization/{server => }/pages/stars.js (100%)
 create mode 100644 test/integration/font-optimization/pages/static-head.js
 delete mode 100644 test/integration/font-optimization/server/next.config.js
 delete mode 100644 test/integration/font-optimization/serverless/next.config.js
 delete mode 100644 test/integration/font-optimization/serverless/pages/_document.js
 delete mode 100644 test/integration/font-optimization/serverless/pages/index.js

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 463b7833b89b9..01339fc09cfe6 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -863,7 +863,7 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_REACT_MODE': JSON.stringify(
           config.experimental.reactMode
         ),
-        'process.env.__OPTIMIZE_FONTS': JSON.stringify(
+        'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
           config.experimental.optimizeFonts
         ),
         'process.env.__NEXT_SCROLL_RESTORATION': JSON.stringify(
diff --git a/packages/next/export/worker.ts b/packages/next/export/worker.ts
index 5ec614cd5d4db..5c600e79b0b20 100644
--- a/packages/next/export/worker.ts
+++ b/packages/next/export/worker.ts
@@ -259,6 +259,15 @@ export default async function exportPage({
         html = components.Component
         queryWithAutoExportWarn()
       } else {
+        /**
+         * This sets environment variable to be used at the time of static export by head.tsx.
+         * Using this from process.env allows targetting both serverless and SSR by calling
+         * `process.env.__NEXT_OPTIMIZE_FONTS`.
+         * TODO(prateekbh@): Remove this when experimental.optimizeFonts are being clened up.
+         */
+        if (optimizeFonts) {
+          process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true)
+        }
         curRenderOpts = {
           ...components,
           ...renderOpts,
diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index be1b93591c196..3dc0e1495e7d7 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -137,7 +137,7 @@ function reduceComponents(
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
-      if (process.env.__OPTIMIZE_FONTS) {
+      if (process.env.__NEXT_OPTIMIZE_FONTS) {
         if (
           c.type === 'link' &&
           c.props['href'] &&
diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 2d6216830b60d..0222d1863cd77 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -155,7 +155,7 @@ registerPostProcessor(
   new FontOptimizerMiddleware(),
   // Using process.env because passing Experimental flag through loader is not possible.
   // @ts-ignore
-  (options) => options.optimizeFonts || process.env.__OPTIMIZE_FONTS
+  (options) => options.optimizeFonts || process.env.__NEXT_OPTIMIZE_FONTS
 )
 
 export default processHTML
diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts
index 10a700a1d42a4..8584b76a0d8d4 100644
--- a/packages/next/next-server/server/next-server.ts
+++ b/packages/next/next-server/server/next-server.ts
@@ -231,11 +231,12 @@ export default class Server {
     /**
      * This sets environment variable to be used at the time of SSR by head.tsx.
      * Using this from process.env allows targetting both serverless and SSR by calling
-     * `process.env.__OPTIMIZE_FONTS`.
-     * Nit: For serverless/static this is supplied by webpack define plugin.
+     * `process.env.__NEXT_OPTIMIZE_FONTS`.
      * TODO(prateekbh@): Remove this when experimental.optimizeFonts are being clened up.
      */
-    process.env.__OPTIMIZE_FONTS = JSON.stringify(this.renderOpts.optimizeFonts)
+    if (this.renderOpts.optimizeFonts) {
+      process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true)
+    }
   }
 
   protected currentPhase(): string {
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 58d4f86e65b40..c1edbf9ecbb6b 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -297,7 +297,7 @@ export class Head extends Component<
         )
     }
 
-    if (process.env.__OPTIMIZE_FONTS) {
+    if (process.env.__NEXT_OPTIMIZE_FONTS) {
       children = this.makeStylesheetInert(children)
     }
 
@@ -457,7 +457,7 @@ export class Head extends Component<
                 href={canonicalBase + getAmpPath(ampPath, dangerousAsPath)}
               />
             )}
-            {process.env.__OPTIMIZE_FONTS
+            {process.env.__NEXT_OPTIMIZE_FONTS
               ? this.makeStylesheetInert(this.getCssLinks())
               : this.getCssLinks()}
             {!disableRuntimeJS && this.getPreloadDynamicChunks()}
diff --git a/test/integration/font-optimization/next.config.js b/test/integration/font-optimization/next.config.js
new file mode 100644
index 0000000000000..98699f91d5c7b
--- /dev/null
+++ b/test/integration/font-optimization/next.config.js
@@ -0,0 +1 @@
+module.exports = { target: 'serverless', experimental: { optimizeFonts: true } }
diff --git a/test/integration/font-optimization/server/pages/_document.js b/test/integration/font-optimization/pages/_document.js
similarity index 100%
rename from test/integration/font-optimization/server/pages/_document.js
rename to test/integration/font-optimization/pages/_document.js
diff --git a/test/integration/font-optimization/server/pages/index.js b/test/integration/font-optimization/pages/index.js
similarity index 100%
rename from test/integration/font-optimization/server/pages/index.js
rename to test/integration/font-optimization/pages/index.js
diff --git a/test/integration/font-optimization/server/pages/stars.js b/test/integration/font-optimization/pages/stars.js
similarity index 100%
rename from test/integration/font-optimization/server/pages/stars.js
rename to test/integration/font-optimization/pages/stars.js
diff --git a/test/integration/font-optimization/pages/static-head.js b/test/integration/font-optimization/pages/static-head.js
new file mode 100644
index 0000000000000..f56ef406776c3
--- /dev/null
+++ b/test/integration/font-optimization/pages/static-head.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import Head from 'next/head'
+
+const Page = () => {
+  return (
+    <>
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Modak"
+          rel="stylesheet"
+        />
+      </Head>
+      <div>Hi!</div>
+    </>
+  )
+}
+
+export default Page
diff --git a/test/integration/font-optimization/server/next.config.js b/test/integration/font-optimization/server/next.config.js
deleted file mode 100644
index 18dd5fac4b1e7..0000000000000
--- a/test/integration/font-optimization/server/next.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  experimental: {
-    optimizeFonts: true,
-  },
-}
diff --git a/test/integration/font-optimization/serverless/next.config.js b/test/integration/font-optimization/serverless/next.config.js
deleted file mode 100644
index 9471c59ecd293..0000000000000
--- a/test/integration/font-optimization/serverless/next.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  experimental: {
-    optimizeFonts: true,
-  },
-  target: 'serverless',
-}
diff --git a/test/integration/font-optimization/serverless/pages/_document.js b/test/integration/font-optimization/serverless/pages/_document.js
deleted file mode 100644
index 59d8fe75cd4c4..0000000000000
--- a/test/integration/font-optimization/serverless/pages/_document.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-/// @ts-ignore
-import Document, { Main, NextScript, Head } from 'next/document'
-
-export default class MyDocument extends Document {
-  constructor(props) {
-    super(props)
-    const { __NEXT_DATA__, ids } = props
-    if (ids) {
-      __NEXT_DATA__.ids = ids
-    }
-  }
-
-  render() {
-    return (
-      <html>
-        <Head>
-          <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Voces"
-          />
-        </Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </html>
-    )
-  }
-}
diff --git a/test/integration/font-optimization/serverless/pages/index.js b/test/integration/font-optimization/serverless/pages/index.js
deleted file mode 100644
index 39cf2d1f7b376..0000000000000
--- a/test/integration/font-optimization/serverless/pages/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-
-const Page = () => {
-  return <div>Hi!</div>
-}
-
-export default Page
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 3cc62bb56fd9a..83b4d083ad59b 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -12,27 +12,20 @@ import fs from 'fs-extra'
 
 jest.setTimeout(1000 * 30)
 
+const appDir = join(__dirname, '../')
+const nextConfig = join(appDir, 'next.config.js')
+let builtServerPagesDir
+let builtPage
+let appPort
+let app
+
 const fsExists = (file) =>
   fs
     .access(file)
     .then(() => true)
     .catch(() => false)
 
-describe('Font optimization for SSR apps', () => {
-  const appDir = join(__dirname, '../server')
-  let builtServerPagesDir
-  let builtPage
-  let appPort
-  let app
-  beforeAll(async () => {
-    await nextBuild(appDir)
-    appPort = await findPort()
-    app = await nextStart(appDir, appPort)
-    builtServerPagesDir = join(appDir, '.next', 'server')
-    builtPage = (file) => join(builtServerPagesDir, file)
-  })
-  afterAll(() => killApp(app))
-
+function runTests() {
   it('should inline the google fonts for static pages', async () => {
     const html = await renderViaHTTP(appPort, '/')
     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
@@ -44,6 +37,17 @@ describe('Font optimization for SSR apps', () => {
     )
   })
 
+  it('should inline the google fonts for static pages with Next/Head', async () => {
+    const html = await renderViaHTTP(appPort, '/static-head')
+    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
+    expect(html).toContain(
+      '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Modak"/>'
+    )
+    expect(html).toMatch(
+      /<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Modak">.*<\/style>/
+    )
+  })
+
   it('should inline the google fonts for SSR pages', async () => {
     const html = await renderViaHTTP(appPort, '/stars')
     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
@@ -54,15 +58,32 @@ describe('Font optimization for SSR apps', () => {
       /<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Roboto:wght@700">.*<\/style>/
     )
   })
+}
+
+describe('Font optimization for SSR apps', () => {
+  beforeAll(async () => {
+    await fs.writeFile(
+      nextConfig,
+      `module.exports = { experimental: {optimizeFonts: true} }`,
+      'utf8'
+    )
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+    builtServerPagesDir = join(appDir, '.next', 'server')
+    builtPage = (file) => join(builtServerPagesDir, file)
+  })
+  afterAll(() => killApp(app))
+  runTests()
 })
 
 describe('Font optimization for serverless apps', () => {
-  const appDir = join(__dirname, '../serverless')
-  let builtServerPagesDir
-  let builtPage
-  let appPort
-  let app
   beforeAll(async () => {
+    await fs.writeFile(
+      nextConfig,
+      `module.exports = { target: 'serverless', experimental: {optimizeFonts: true} }`,
+      'utf8'
+    )
     await nextBuild(appDir)
     appPort = await findPort()
     app = await nextStart(appDir, appPort)
@@ -70,14 +91,5 @@ describe('Font optimization for serverless apps', () => {
     builtPage = (file) => join(builtServerPagesDir, file)
   })
   afterAll(() => killApp(app))
-  it('should inline the google fonts for static pages', async () => {
-    const html = await renderViaHTTP(appPort, '/')
-    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
-    expect(html).toContain(
-      '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
-    )
-    expect(html).toMatch(
-      /<style data-href="https:\/\/fonts\.googleapis\.com\/css\?family=Voces">.*<\/style>/
-    )
-  })
+  runTests()
 })

From bf09fcbc1342f9ededc314e64ad260547aa263f8 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 8 Jul 2020 23:55:24 -0700
Subject: [PATCH 42/49] addressing comments

---
 .../font-stylesheet-gathering-plugin.ts       | 35 +++++++++++--------
 .../next/next-server/server/font-utils.ts     | 15 ++++----
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index 17c32a78158cb..407f04ea0cb4b 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -40,6 +40,10 @@ export default class FontStylesheetGatheringPlugin {
           parser.hooks.evaluate
             .for('Identifier')
             .tap(this.constructor.name, (node: namedTypes.Identifier) => {
+              // We will only optimize fonts from first party code.
+              if (parser?.state?.module?.resource.includes('node_modules')) {
+                return
+              }
               return node.name === '__jsx'
                 ? new BasicEvaluatedExpression()
                     //@ts-ignore
@@ -52,10 +56,6 @@ export default class FontStylesheetGatheringPlugin {
           parser.hooks.call
             .for('__jsx')
             .tap(this.constructor.name, (node: namedTypes.CallExpression) => {
-              // We will only optimize fonts from first party code.
-              if (parser?.state?.module?.resource.includes('node_modules')) {
-                return
-              }
               if (node.arguments.length !== 2) {
                 // A font link tag has only two arguments rel=stylesheet and href='...'
                 return
@@ -64,15 +64,20 @@ export default class FontStylesheetGatheringPlugin {
                 return
               }
 
+              // node.arguments[0] is the name of the tag and [1] are the props.
               const propsNode = node.arguments[1] as namedTypes.ObjectExpression
-              const props: {
-                [key: string]: string
-              } = propsNode.properties.reduce((originalProps, prop: any) => {
-                // todo check the type of prop
-                // @ts-ignore
-                originalProps[prop.key.name] = prop.value.value
-                return originalProps
-              }, {})
+              const props: { [key: string]: string } = {}
+              propsNode.properties.forEach((prop) => {
+                if (prop.type !== 'Property') {
+                  return
+                }
+                if (
+                  prop.key.type === 'Identifier' &&
+                  prop.value.type === 'Literal'
+                ) {
+                  props[prop.key.name] = prop.value.value as string
+                }
+              })
               if (
                 !props.rel ||
                 props.rel !== 'stylesheet' ||
@@ -100,15 +105,15 @@ export default class FontStylesheetGatheringPlugin {
       compilation.hooks.finishModules.tapAsync(
         this.constructor.name,
         async (_, modulesFinished) => {
-          const allContent = this.gatheredStylesheets.map((url) =>
+          const fontDefinitionPromises = this.gatheredStylesheets.map((url) =>
             getFontDefinitionFromNetwork(url)
           )
           let manifestContent: FontManifest = []
 
-          for (let promiseIndex in allContent) {
+          for (let promiseIndex in fontDefinitionPromises) {
             manifestContent.push({
               url: this.gatheredStylesheets[promiseIndex],
-              content: await allContent[promiseIndex],
+              content: await fontDefinitionPromises[promiseIndex],
             })
           }
           compilation.assets['font-manifest.json'] = new RawSource(
diff --git a/packages/next/next-server/server/font-utils.ts b/packages/next/next-server/server/font-utils.ts
index df5673636de9c..be82035afff39 100644
--- a/packages/next/next-server/server/font-utils.ts
+++ b/packages/next/next-server/server/font-utils.ts
@@ -32,11 +32,12 @@ export function getFontDefinitionFromManifest(
   url: string,
   manifest: FontManifest
 ): string {
-  let fontContent = ''
-  manifest.forEach((font: any) => {
-    if (font && font.url === url) {
-      fontContent = font.content
-    }
-  })
-  return fontContent
+  return (
+    manifest.find((font) => {
+      if (font && font.url === url) {
+        return true
+      }
+      return false
+    })?.content || ''
+  )
 }

From 815d279eb2d6cf28cca64e11d4a8253d6299c74d Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 15 Jul 2020 01:19:53 -0700
Subject: [PATCH 43/49] adding tests for emulated serverless builds

---
 .../webpack/loaders/next-serverless-loader.ts | 13 +++++-
 packages/next/next-server/lib/head.tsx        |  6 ++-
 packages/next/pages/_document.tsx             |  6 ++-
 .../font-optimization/next.config.js          |  1 -
 test/integration/font-optimization/server.js  | 41 +++++++++++++++++
 .../font-optimization/test/index.test.js      | 44 +++++++++++++++++++
 6 files changed, 105 insertions(+), 6 deletions(-)
 delete mode 100644 test/integration/font-optimization/next.config.js
 create mode 100644 test/integration/font-optimization/server.js

diff --git a/packages/next/build/webpack/loaders/next-serverless-loader.ts b/packages/next/build/webpack/loaders/next-serverless-loader.ts
index 2722771b7c9db..1f0b2e891cdcc 100644
--- a/packages/next/build/webpack/loaders/next-serverless-loader.ts
+++ b/packages/next/build/webpack/loaders/next-serverless-loader.ts
@@ -6,6 +6,7 @@ import { loader } from 'webpack'
 import { API_ROUTE } from '../../../lib/constants'
 import {
   BUILD_MANIFEST,
+  FONT_MANIFEST,
   REACT_LOADABLE_MANIFEST,
   ROUTES_MANIFEST,
 } from '../../../next-server/lib/constants'
@@ -56,6 +57,10 @@ const nextServerlessLoader: loader.Loader = function () {
     '/'
   )
   const routesManifest = join(distDir, ROUTES_MANIFEST).replace(/\\/g, '/')
+  const fontManifest = join(distDir, 'serverless', FONT_MANIFEST).replace(
+    /\\/g,
+    '/'
+  )
 
   const escapedBuildId = escapeRegexp(buildId)
   const pageIsDynamicRoute = isDynamicRoute(page)
@@ -261,7 +266,7 @@ const nextServerlessLoader: loader.Loader = function () {
     }
     const {parse} = require('url')
     const {parse: parseQs} = require('querystring')
-    const {renderToHTML} = require('next/dist/next-server/server/render');
+    const { renderToHTML } = require('next/dist/next-server/server/render');
     const { tryGetPreviewData } = require('next/dist/next-server/server/api-utils');
     const {sendHTML} = require('next/dist/next-server/server/send-html');
     const {sendPayload} = require('next/dist/next-server/server/send-payload');
@@ -270,6 +275,7 @@ const nextServerlessLoader: loader.Loader = function () {
     const Document = require('${absoluteDocumentPath}').default;
     const Error = require('${absoluteErrorPath}').default;
     const App = require('${absoluteAppPath}').default;
+
     ${dynamicRouteImports}
     ${rewriteImports}
 
@@ -407,6 +413,11 @@ const nextServerlessLoader: loader.Loader = function () {
         const previewData = tryGetPreviewData(req, res, options.previewProps)
         const isPreviewMode = previewData !== false
 
+        if (process.env.__NEXT_OPTIMIZE_FONTS) {
+          renderOpts.optimizeFonts = true
+          renderOpts.fontManifest = require('${fontManifest}')
+          process.env['__NEXT_OPTIMIZE_FONT'+'S'] = true
+        }
         let result = await renderToHTML(req, res, "${page}", Object.assign({}, getStaticProps ? { ...(parsedUrl.query.amp ? { amp: '1' } : {}) } : parsedUrl.query, nowParams ? nowParams : params, _params, isFallback ? { __nextFallback: 'true' } : {}), renderOpts)
 
         if (!renderMode) {
diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index 3dc0e1495e7d7..dc588d4d56d8d 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -145,8 +145,10 @@ function reduceComponents(
             c.props['href'].startsWith(url)
           )
         ) {
-          c.props['data-href'] = c.props['href']
-          delete c.props['href']
+          const newProps = { ...(c.props || {}) }
+          newProps['data-href'] = newProps['href']
+          newProps['href'] = undefined
+          return React.cloneElement(c, newProps)
         }
       }
       return React.cloneElement(c, { key })
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index c1edbf9ecbb6b..f2016166521c1 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -246,8 +246,10 @@ export class Head extends Component<
         c.props['href'] &&
         OPTIMIZED_FONT_PROVIDERS.some((url) => c.props['href'].startsWith(url))
       ) {
-        c.props['data-href'] = c.props['href']
-        delete c.props['href']
+        const newProps = { ...(c.props || {}) }
+        newProps['data-href'] = newProps['href']
+        newProps['href'] = undefined
+        return React.cloneElement(c, newProps)
       } else if (c.props && c.props['children']) {
         c.props['children'] = this.makeStylesheetInert(c.props['children'])
       }
diff --git a/test/integration/font-optimization/next.config.js b/test/integration/font-optimization/next.config.js
deleted file mode 100644
index 98699f91d5c7b..0000000000000
--- a/test/integration/font-optimization/next.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = { target: 'serverless', experimental: { optimizeFonts: true } }
diff --git a/test/integration/font-optimization/server.js b/test/integration/font-optimization/server.js
new file mode 100644
index 0000000000000..c35347a489518
--- /dev/null
+++ b/test/integration/font-optimization/server.js
@@ -0,0 +1,41 @@
+const http = require('http')
+const url = require('url')
+const fs = require('fs')
+const path = require('path')
+const server = http.createServer((req, res) => {
+  let { pathname } = url.parse(req.url)
+  if (pathname.startsWith('/_next/data')) {
+    pathname = pathname
+      .replace(`/_next/data/${process.env.BUILD_ID}/`, '/')
+      .replace(/\.json$/, '')
+  }
+  console.log('serving', pathname)
+
+  if (pathname === '/favicon.ico') {
+    res.statusCode = 404
+    return res.end()
+  }
+
+  if (pathname.startsWith('/_next/static/')) {
+    res.write(
+      fs.readFileSync(
+        path.join(
+          __dirname,
+          './.next/static/',
+          pathname.slice('/_next/static/'.length)
+        ),
+        'utf8'
+      )
+    )
+    return res.end()
+  } else {
+    const re = require(`./.next/serverless/pages${pathname}`)
+    return typeof re.render === 'function'
+      ? re.render(req, res)
+      : re.default(req, res)
+  }
+})
+
+server.listen(process.env.PORT, () => {
+  console.log('ready on', process.env.PORT)
+})
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 83b4d083ad59b..343a04c58a88c 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -7,6 +7,7 @@ import {
   nextStart,
   nextBuild,
   renderViaHTTP,
+  initNextServerScript,
 } from 'next-test-utils'
 import fs from 'fs-extra'
 
@@ -25,6 +26,20 @@ const fsExists = (file) =>
     .then(() => true)
     .catch(() => false)
 
+async function getBuildId() {
+  return fs.readFile(join(appDir, '.next', 'BUILD_ID'), 'utf8')
+}
+
+const startServerlessEmulator = async (dir, port) => {
+  const scriptPath = join(dir, 'server.js')
+  const env = Object.assign(
+    {},
+    { ...process.env },
+    { PORT: port, BUILD_ID: await getBuildId() }
+  )
+  return initNextServerScript(scriptPath, /ready on/i, env)
+}
+
 function runTests() {
   it('should inline the google fonts for static pages', async () => {
     const html = await renderViaHTTP(appPort, '/')
@@ -93,3 +108,32 @@ describe('Font optimization for serverless apps', () => {
   afterAll(() => killApp(app))
   runTests()
 })
+
+describe('Font optimization for emulated serverless apps', () => {
+  beforeAll(async () => {
+    await fs.writeFile(
+      nextConfig,
+      `module.exports = { target: 'experimental-serverless-trace', experimental: {optimizeFonts: true} }`,
+      'utf8'
+    )
+    await nextBuild(appDir)
+    appPort = await findPort()
+    await startServerlessEmulator(appDir, appPort)
+    builtServerPagesDir = join(appDir, '.next', 'serverless')
+    builtPage = (file) => join(builtServerPagesDir, file)
+  })
+  afterAll(async () => {
+    await fs.remove(nextConfig)
+  })
+  // only testing for stars page as others are static pages.
+  it('should inline the google fonts for SSR pages', async () => {
+    const html = await renderViaHTTP(appPort, '/stars')
+    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
+    expect(html).toContain(
+      '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
+    )
+    expect(html).toMatch(
+      /<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Roboto:wght@700">.*<\/style>/
+    )
+  })
+})

From 58ad1860fe5d0dde82578322ab4ac259f32a3fcf Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 15 Jul 2020 11:05:42 -0700
Subject: [PATCH 44/49] removes the need to fetch font from network in render
 and test fixes

---
 packages/next/next-server/lib/post-process.ts |  4 +-
 packages/next/next-server/server/render.tsx   | 16 +---
 test/integration/font-optimization/server.js  | 82 +++++++++++++++++--
 .../font-optimization/test/index.test.js      | 14 +---
 4 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts
index 0222d1863cd77..3c45f2383a3c3 100644
--- a/packages/next/next-server/lib/post-process.ts
+++ b/packages/next/next-server/lib/post-process.ts
@@ -8,7 +8,7 @@ type postProcessOptions = {
 }
 
 type renderOptions = {
-  getFontDefinition?: (url: string) => Promise<string>
+  getFontDefinition?: (url: string) => string
 }
 
 type postProcessData = {
@@ -136,7 +136,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
         // The font is already optimized and probably the response is cached
         continue
       }
-      const fontContent = await options.getFontDefinition(url)
+      const fontContent = options.getFontDefinition(url)
       result = result.replace(
         '</head>',
         `<style data-href="${url}">${fontContent.replace(
diff --git a/packages/next/next-server/server/render.tsx b/packages/next/next-server/server/render.tsx
index 4d5ea19533bf8..f15226a3301e1 100644
--- a/packages/next/next-server/server/render.tsx
+++ b/packages/next/next-server/server/render.tsx
@@ -46,11 +46,7 @@ import { getPageFiles } from './get-page-files'
 import { LoadComponentsReturnType, ManifestItem } from './load-components'
 import optimizeAmp from './optimize-amp'
 import postProcess from '../lib/post-process'
-import {
-  FontManifest,
-  getFontDefinitionFromManifest,
-  getFontDefinitionFromNetwork,
-} from './font-utils'
+import { FontManifest, getFontDefinitionFromManifest } from './font-utils'
 
 function noRouter() {
   const message =
@@ -289,15 +285,11 @@ export async function renderToHTML(
     basePath,
   } = renderOpts
 
-  const getFontDefinition = (url: string): Promise<string> => {
+  const getFontDefinition = (url: string): string => {
     if (fontManifest) {
-      return Promise.resolve(getFontDefinitionFromManifest(url, fontManifest))
+      return getFontDefinitionFromManifest(url, fontManifest)
     }
-    /**
-     * Markup for static files in serverless build are generated via webpack loader.
-     * By that time the font manifest is not created thus the font definition is requested via network.
-     */
-    return getFontDefinitionFromNetwork(url)
+    return ''
   }
 
   const callMiddleware = async (method: string, args: any[], props = false) => {
diff --git a/test/integration/font-optimization/server.js b/test/integration/font-optimization/server.js
index c35347a489518..6a98fa3d30806 100644
--- a/test/integration/font-optimization/server.js
+++ b/test/integration/font-optimization/server.js
@@ -2,9 +2,12 @@ const http = require('http')
 const url = require('url')
 const fs = require('fs')
 const path = require('path')
-const server = http.createServer((req, res) => {
+const server = http.createServer(async (req, res) => {
   let { pathname } = url.parse(req.url)
+  pathname = pathname.replace(/\/$/, '')
+  let isDataReq = false
   if (pathname.startsWith('/_next/data')) {
+    isDataReq = true
     pathname = pathname
       .replace(`/_next/data/${process.env.BUILD_ID}/`, '/')
       .replace(/\.json$/, '')
@@ -22,17 +25,84 @@ const server = http.createServer((req, res) => {
         path.join(
           __dirname,
           './.next/static/',
-          pathname.slice('/_next/static/'.length)
+          decodeURI(pathname.slice('/_next/static/'.length))
         ),
         'utf8'
       )
     )
     return res.end()
   } else {
-    const re = require(`./.next/serverless/pages${pathname}`)
-    return typeof re.render === 'function'
-      ? re.render(req, res)
-      : re.default(req, res)
+    const ext = isDataReq ? 'json' : 'html'
+    if (
+      fs.existsSync(
+        path.join(__dirname, `./.next/serverless/pages${pathname}.${ext}`)
+      )
+    ) {
+      res.write(
+        fs.readFileSync(
+          path.join(__dirname, `./.next/serverless/pages${pathname}.${ext}`),
+          'utf8'
+        )
+      )
+      return res.end()
+    }
+
+    let re
+    try {
+      re = require(`./.next/serverless/pages${pathname}`)
+    } catch {
+      const d = decodeURI(pathname)
+      if (
+        fs.existsSync(
+          path.join(__dirname, `./.next/serverless/pages${d}.${ext}`)
+        )
+      ) {
+        res.write(
+          fs.readFileSync(
+            path.join(__dirname, `./.next/serverless/pages${d}.${ext}`),
+            'utf8'
+          )
+        )
+        return res.end()
+      }
+
+      const routesManifest = require('./.next/routes-manifest.json')
+      const { dynamicRoutes } = routesManifest
+      dynamicRoutes.some(({ page, regex }) => {
+        if (new RegExp(regex).test(pathname)) {
+          if (
+            fs.existsSync(
+              path.join(__dirname, `./.next/serverless/pages${page}.${ext}`)
+            )
+          ) {
+            res.write(
+              fs.readFileSync(
+                path.join(__dirname, `./.next/serverless/pages${page}.${ext}`),
+                'utf8'
+              )
+            )
+            res.end()
+            return true
+          }
+
+          re = require(`./.next/serverless/pages${page}`)
+          return true
+        }
+        return false
+      })
+    }
+    if (!res.finished) {
+      try {
+        return await (typeof re.render === 'function'
+          ? re.render(req, res)
+          : re.default(req, res))
+      } catch (e) {
+        console.log('FAIL_FUNCTION', e)
+        res.statusCode = 500
+        res.write('FAIL_FUNCTION')
+        res.end()
+      }
+    }
   }
 })
 
diff --git a/test/integration/font-optimization/test/index.test.js b/test/integration/font-optimization/test/index.test.js
index 343a04c58a88c..49d66ee869f88 100644
--- a/test/integration/font-optimization/test/index.test.js
+++ b/test/integration/font-optimization/test/index.test.js
@@ -42,7 +42,7 @@ const startServerlessEmulator = async (dir, port) => {
 
 function runTests() {
   it('should inline the google fonts for static pages', async () => {
-    const html = await renderViaHTTP(appPort, '/')
+    const html = await renderViaHTTP(appPort, '/index')
     expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
     expect(html).toContain(
       '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css?family=Voces"/>'
@@ -125,15 +125,5 @@ describe('Font optimization for emulated serverless apps', () => {
   afterAll(async () => {
     await fs.remove(nextConfig)
   })
-  // only testing for stars page as others are static pages.
-  it('should inline the google fonts for SSR pages', async () => {
-    const html = await renderViaHTTP(appPort, '/stars')
-    expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
-    expect(html).toContain(
-      '<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
-    )
-    expect(html).toMatch(
-      /<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Roboto:wght@700">.*<\/style>/
-    )
-  })
+  runTests()
 })

From 6d600ab565c87e570466c0e86dc2487339ccc4d2 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 15 Jul 2020 11:21:39 -0700
Subject: [PATCH 45/49] fixing type issues

---
 .../build/webpack/plugins/font-stylesheet-gathering-plugin.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
index 407f04ea0cb4b..3e3efba8d2bfb 100644
--- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
+++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
@@ -27,7 +27,7 @@ export default class FontStylesheetGatheringPlugin {
     for (const type of JS_TYPES) {
       factory.hooks.parser
         .for('javascript/' + type)
-        .tap(this.constructor.name, (parser) => {
+        .tap(this.constructor.name, (parser: any) => {
           /**
            * Webpack fun facts:
            * `parser.hooks.call.for` cannot catch calls for user defined identifiers like `__jsx`
@@ -104,7 +104,7 @@ export default class FontStylesheetGatheringPlugin {
     compiler.hooks.make.tapAsync(this.constructor.name, (compilation, cb) => {
       compilation.hooks.finishModules.tapAsync(
         this.constructor.name,
-        async (_, modulesFinished) => {
+        async (_: any, modulesFinished: Function) => {
           const fontDefinitionPromises = this.gatheredStylesheets.map((url) =>
             getFontDefinitionFromNetwork(url)
           )

From a462650bebfca0f55f1b1442f18f3176e710614d Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Wed, 15 Jul 2020 23:19:14 -0700
Subject: [PATCH 46/49] fix for ie 11

---
 .../next/next-server/server/font-utils.ts     | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/next/next-server/server/font-utils.ts b/packages/next/next-server/server/font-utils.ts
index be82035afff39..6120ff10be27b 100644
--- a/packages/next/next-server/server/font-utils.ts
+++ b/packages/next/next-server/server/font-utils.ts
@@ -1,19 +1,22 @@
 const https = require('https')
 
+const CHROME_UA =
+  'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36'
+const IE_UA = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko'
+
 export type FontManifest = Array<{
   url: string
   content: string
 }>
 
-export function getFontDefinitionFromNetwork(url: string): Promise<string> {
+function getFontForUA(url: string, UA: string): Promise<String> {
   return new Promise((resolve) => {
     let rawData: any = ''
     https.get(
       url,
       {
         headers: {
-          'user-agent':
-            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36',
+          'user-agent': UA,
         },
       },
       (res: any) => {
@@ -28,6 +31,19 @@ export function getFontDefinitionFromNetwork(url: string): Promise<string> {
   })
 }
 
+export async function getFontDefinitionFromNetwork(
+  url: string
+): Promise<string> {
+  let result = ''
+  /**
+   * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
+   * CSS cascading 🤷‍♂️.
+   */
+  result += await getFontForUA(url, IE_UA)
+  result += await getFontForUA(url, CHROME_UA)
+  return result
+}
+
 export function getFontDefinitionFromManifest(
   url: string,
   manifest: FontManifest

From 45a90ed21a020d59331acb3813f70d1fe1211505 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Fri, 17 Jul 2020 14:02:52 -0700
Subject: [PATCH 47/49] removed the const due to tree shaking problem

---
 packages/next/next-server/lib/head.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/next/next-server/lib/head.tsx b/packages/next/next-server/lib/head.tsx
index dc588d4d56d8d..0161711ccbc6b 100644
--- a/packages/next/next-server/lib/head.tsx
+++ b/packages/next/next-server/lib/head.tsx
@@ -3,7 +3,6 @@ import Effect from './side-effect'
 import { AmpStateContext } from './amp-context'
 import { HeadManagerContext } from './head-manager-context'
 import { isInAmpMode } from './amp'
-import { OPTIMIZED_FONT_PROVIDERS } from './constants'
 
 type WithInAmpMode = {
   inAmpMode?: boolean
@@ -141,7 +140,8 @@ function reduceComponents(
         if (
           c.type === 'link' &&
           c.props['href'] &&
-          OPTIMIZED_FONT_PROVIDERS.some((url) =>
+          // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+          ['https://fonts.googleapis.com/css'].some((url) =>
             c.props['href'].startsWith(url)
           )
         ) {

From 03eb09862e34a61e701bdd1974ff046a41529340 Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Fri, 17 Jul 2020 14:19:49 -0700
Subject: [PATCH 48/49] increasing the error.js size as it now has filter logic
 for font optimization

---
 test/integration/build-output/test/index.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/integration/build-output/test/index.test.js b/test/integration/build-output/test/index.test.js
index 2d12e3a72fad9..64c3122f60d7e 100644
--- a/test/integration/build-output/test/index.test.js
+++ b/test/integration/build-output/test/index.test.js
@@ -98,7 +98,7 @@ describe('Build Output', () => {
       expect(parseFloat(indexFirstLoad) - 60).toBeLessThanOrEqual(0)
       expect(indexFirstLoad.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(err404Size) - 3.4).toBeLessThanOrEqual(0)
+      expect(parseFloat(err404Size) - 3.5).toBeLessThanOrEqual(0)
       expect(err404Size.endsWith('kB')).toBe(true)
 
       expect(parseFloat(err404FirstLoad) - 63).toBeLessThanOrEqual(0)

From 90f41fbf892195fa1227381d80fc5fb4eaa0a33c Mon Sep 17 00:00:00 2001
From: Prateek Bhatnagar <prateek89born@gmail.com>
Date: Mon, 20 Jul 2020 11:00:24 -0700
Subject: [PATCH 49/49] Update index.test.js

---
 test/integration/build-output/test/index.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/integration/build-output/test/index.test.js b/test/integration/build-output/test/index.test.js
index 64c3122f60d7e..4f8abfecce1ed 100644
--- a/test/integration/build-output/test/index.test.js
+++ b/test/integration/build-output/test/index.test.js
@@ -98,7 +98,7 @@ describe('Build Output', () => {
       expect(parseFloat(indexFirstLoad) - 60).toBeLessThanOrEqual(0)
       expect(indexFirstLoad.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(err404Size) - 3.5).toBeLessThanOrEqual(0)
+      expect(parseFloat(err404Size) - 3.6).toBeLessThanOrEqual(0)
       expect(err404Size.endsWith('kB')).toBe(true)
 
       expect(parseFloat(err404FirstLoad) - 63).toBeLessThanOrEqual(0)