Add support for exporting from serverless build (vercel#9744)

* Add support for exporting from serverless build

* Add more tests

* Update syntax

* Dont add dynamic params in worker

* Update amphtml rel for serverless tests

* Update tests again

* Update dynamic params populating

* Fix params parsing

* Pass params separately

Author: ijjk

packages/next/build/webpack/loaders/next-serverless-loader.ts

@@ -104,7 +104,7 @@ const nextServerlessLoader: loader.Loader = function() {
 
     export const config = ComponentInfo['confi' + 'g'] || {}
     export const _app = App
-    export async function renderReqToHTML(req, res, fromExport) {
+    export async function renderReqToHTML(req, res, fromExport, _renderOpts, _params) {
       const options = {
         App,
         Document,
@@ -117,6 +117,7 @@ const nextServerlessLoader: loader.Loader = function() {
         assetPrefix: "${assetPrefix}",
         ampBindInitData: ${ampBindInitData === true ||
           ampBindInitData === 'true'},
+        ..._renderOpts
       }
       let sprData = false
 
@@ -176,7 +177,7 @@ const nextServerlessLoader: loader.Loader = function() {
           `
             : `const nowParams = null;`
         }
-        let result = await renderToHTML(req, res, "${page}", Object.assign({}, unstable_getStaticProps ? {} : parsedUrl.query, nowParams ? nowParams : params), renderOpts)
+        let result = await renderToHTML(req, res, "${page}", Object.assign({}, unstable_getStaticProps ? {} : parsedUrl.query, nowParams ? nowParams : params, _params), renderOpts)
 
         if (sprData && !fromExport) {
           const payload = JSON.stringify(renderOpts.sprData)

packages/next/export/index.ts

@@ -116,12 +116,6 @@ export default async function(
   const subFolders = nextConfig.exportTrailingSlash
   const isLikeServerless = nextConfig.target !== 'server'
 
-  if (!options.buildExport && isLikeServerless) {
-    throw new Error(
-      'Cannot export when target is not server. https://err.sh/zeit/next.js/next-export-serverless'
-    )
-  }
-
   log(`> using build directory: ${distDir}`)
 
   if (!existsSync(distDir)) {
@@ -132,7 +126,12 @@ export default async function(
 
   const buildId = readFileSync(join(distDir, BUILD_ID_FILE), 'utf8')
   const pagesManifest =
-    !options.pages && require(join(distDir, SERVER_DIRECTORY, PAGES_MANIFEST))
+    !options.pages &&
+    require(join(
+      distDir,
+      isLikeServerless ? SERVERLESS_DIRECTORY : SERVER_DIRECTORY,
+      PAGES_MANIFEST
+    ))
 
   let prerenderManifest
   try {

packages/next/export/worker.js

@@ -1,5 +1,6 @@
 import mkdirpModule from 'mkdirp'
 import { promisify } from 'util'
+import url from 'url'
 import { extname, join, dirname, sep } from 'path'
 import { renderToHTML } from '../next-server/server/render'
 import { writeFile, access } from 'fs'
@@ -40,14 +41,18 @@ export default async function({
     const { page } = pathMap
     const filePath = path === '/' ? '/index' : path
     const ampPath = `${filePath}.amp`
+    let params
 
     // Check if the page is a specified dynamic route
     if (isDynamicRoute(page) && page !== path) {
-      const params = getRouteMatcher(getRouteRegex(page))(path)
+      params = getRouteMatcher(getRouteRegex(page))(path)
       if (params) {
-        query = {
-          ...query,
-          ...params,
+        // we have to pass these separately for serverless
+        if (!serverless) {
+          query = {
+            ...query,
+            ...params,
+          }
         }
       } else {
         throw new Error(
@@ -107,26 +112,40 @@ export default async function({
     }
 
     if (serverless) {
-      const mod = require(join(
+      const curUrl = url.parse(req.url, true)
+      req.url = url.format({
+        ...curUrl,
+        query: {
+          ...curUrl.query,
+          ...query,
+        },
+      })
+      const { Component: mod } = await loadComponents(
         distDir,
-        'serverless/pages',
-        (page === '/' ? 'index' : page) + '.js'
-      ))
+        buildId,
+        page,
+        serverless
+      )
 
-      // for non-dynamic SPR pages we should have already
-      // prerendered the file
-      if (renderedDuringBuild(mod.unstable_getStaticProps)) return results
+      // if it was auto-exported the HTML is loaded here
+      if (typeof mod === 'string') {
+        html = mod
+      } else {
+        // for non-dynamic SPR pages we should have already
+        // prerendered the file
+        if (renderedDuringBuild(mod.unstable_getStaticProps)) return results
 
-      if (mod.unstable_getStaticProps && !htmlFilepath.endsWith('.html')) {
-        // make sure it ends with .html if the name contains a dot
-        htmlFilename += '.html'
-        htmlFilepath += '.html'
-      }
+        if (mod.unstable_getStaticProps && !htmlFilepath.endsWith('.html')) {
+          // make sure it ends with .html if the name contains a dot
+          htmlFilename += '.html'
+          htmlFilepath += '.html'
+        }
 
-      renderMethod = mod.renderReqToHTML
-      const result = await renderMethod(req, res, true)
-      curRenderOpts = result.renderOpts || {}
-      html = result.html
+        renderMethod = mod.renderReqToHTML
+        const result = await renderMethod(req, res, true, { ampPath }, params)
+        curRenderOpts = result.renderOpts || {}
+        html = result.html
+      }
 
       if (!html) {
         throw new Error(`Failed to render serverless page`)

test/integration/export-default-map-serverless/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  target: 'serverless',
+}

test/integration/export-default-map-serverless/pages/docs/index.js

@@ -0,0 +1,5 @@
+import { useAmp } from 'next/amp'
+
+export const config = { amp: 'hybrid' }
+
+export default () => <p>I'm an {useAmp() ? 'AMP' : 'normal'} page</p>

test/integration/export-default-map-serverless/pages/index.js

@@ -0,0 +1,2 @@
+export default () => <p>Simple hybrid amp/non-amp page</p>
+export const config = { amp: 'hybrid' }

test/integration/export-default-map-serverless/pages/info.js

@@ -0,0 +1,5 @@
+import { useAmp } from 'next/amp'
+
+export const config = { amp: 'hybrid' }
+
+export default () => <p>I'm an {useAmp() ? 'AMP' : 'normal'} page</p>

test/integration/export-default-map-serverless/pages/just-amp/index.js

@@ -0,0 +1,2 @@
+export default () => <p>I am an AMP only page</p>
+export const config = { amp: true }

test/integration/export-default-map-serverless/pages/some.js

@@ -0,0 +1,3 @@
+export const config = { amp: 'hybrid' }
+
+export default () => <p>I'm an AMP page</p>

test/integration/export-default-map-serverless/pages/v1.12/docs.js

@@ -0,0 +1,3 @@
+export default function Docs(props) {
+  return <div>Hello again 👋</div>
+}