Refactor next-on-netlify: Break out into functions

Refactor the next-on-netlify.js file into several functions that are 
easier to manage.

next-on-netlify now creates one Netlify Function per SSR page and API 
endpoint. This is probably better than bundling all pages into one 
function.

Custom _redirects files are no longer merged into the next-on-netlify 
redirects. This is noted in the README and will be re-implemented, if 
demand arises.

Author: FinnWoelm

README.md

@@ -62,8 +62,8 @@ We're almost done! We just have to tell Netlify how to build our NextJS app, whe
 ```toml
 [build]
   command   = "npm run build"
-  functions = "functions"
-  publish   = "out"
+  functions = "out_functions"
+  publish   = "out_publish"
 ```
 
 We're done. Let's deploy 🚀🚀🚀
@@ -91,8 +91,8 @@ Then, add the following `[dev]` block to your `netlify.toml`:
 #   ...
 
 [dev]
-  functions = "functions"
-  publish   = "out"
+  functions = "out_functions"
+  publish   = "out_publish"
   # We manually set the framework to static, otherwise Netlify automatically
   # detects NextJS and redirects do not work.
   # Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
@@ -116,18 +116,20 @@ From now on, whenever you want to preview your application locally, just run:
 1. `npm run build`: This will run `next build` to build your NextJS app and `next-on-netlify` to prepare your NextJS app for compatibility with Netlify
 1. `netlify dev`: This will emulate Netlify on your computer and let you preview your app on `http://localhost:8888`.
 
-#### Add Custom Redirects
+#### Custom Netlify Redirects
 
-You can define custom redirects in a `_redirects` file in the `public/` folder. When you run `next-on-netlify`, your redirects will be merged with the redirects defined by `next-on-netlify`. Note that your redirects take priority.
+You can define custom redirects in the `netlify.toml` file.
+Routes defined by `next-on-netlify` take precedence over routes
+defined in `netlify.toml`.
 
-Or you can define custom redirects in the `netlify.toml` file.
+In the past, it was possible to define custom redirects in a `_redirects` file. This is not possible anymore. Let me know if you have a need for this feature and we can add it back.
 
 [Read more about Netlify redirects here](https://docs.netlify.com/routing/redirects/).  
 
+#### Custom Netlify Functions
 
-## Limitations
-
-next-on-netlify has only been tested on NextJS version 9 and above.
+`next-on-netlify` creates one Netlify Function for each of your
+SSR pages and API endpoints. It is currently not possible to create custom Netlify Functions. Let me know if you have a need for this feature and we can add it.
 
 ## Credits
 

cypress/fixtures/netlify.toml

@@ -1,12 +1,12 @@
 [build]
   command     = "npm run build"
-  functions   = "functions"
-  publish     = "out"
+  functions   = "out_functions"
+  publish     = "out_publish"
 
 [dev]
   # We manually set the framework to static, otherwise Netlify automatically
   # detects NextJS and redirects do not work.
   # Read more: https://github.com/netlify/cli/blob/master/docs/netlify-dev.md#project-detection
   framework   = "#static"
-  functions   = "functions"
-  publish     = "out"
+  functions   = "out_functions"
+  publish     = "out_publish"

lib/collectNextjsPages.js

@@ -0,0 +1,34 @@
+const { join }        = require('path')
+const getNextDistDir  = require('./getNextDistDir')
+
+
+// This is where next-on-netlify will place all static files.
+// The publish key in netlify.toml should point to this folder.
+const NETLIFY_PUBLISH_PATH    = join(".", "out_publish/")
+
+// This is where next-on-netlify will place all Netlify Functions.
+// The functions key in netlify.toml should point to this folder.
+const NETLIFY_FUNCTIONS_PATH  = join(".", "out_functions/")
+
+// This is where static assets, such as images, can be placed. They will be
+// copied as-is to the Netlify publish folder.
+const PUBLIC_PATH             = join(".", "public/")
+
+// This is the file where NextJS can be configured
+const NEXT_CONFIG_PATH        = join(".", "next.config.js")
+
+// This is the folder that NextJS builds to; default is .next
+const NEXT_DIST_DIR           = getNextDistDir({ nextConfigPath: NEXT_CONFIG_PATH })
+
+// This is the Netlify Function template that wraps all SSR pages
+const FUNCTION_TEMPLATE_PATH  = join(__dirname, "netlifyFunctionTemplate.js")
+
+
+module.exports = {
+  NETLIFY_PUBLISH_PATH,
+  NETLIFY_FUNCTIONS_PATH,
+  PUBLIC_PATH,
+  NEXT_CONFIG_PATH,
+  NEXT_DIST_DIR,
+  FUNCTION_TEMPLATE_PATH,
+}

lib/config.js

@@ -0,0 +1,19 @@
+const { join }                                = require('path')
+const { copySync }                            = require('fs-extra')
+const { NETLIFY_PUBLISH_PATH, NEXT_DIST_DIR } = require('./config')
+
+// Copy the NextJS' static assets from NextJS distDir to Netlify publish folder.
+// These need to be available for NextJS to work.
+const copyNextAssets = () => {
+  console.log(`\x1b[1m💼 Copying static NextJS assets to ${NETLIFY_PUBLISH_PATH}\x1b[22m`)
+  copySync(
+    join(NEXT_DIST_DIR,         "static"),
+    join(NETLIFY_PUBLISH_PATH,  "_next",  "static"),
+    {
+      overwrite: false,
+      errorOnExist: true
+    }
+  )
+}
+
+module.exports = copyNextAssets

lib/copyNextAssets.js

@@ -0,0 +1,15 @@
+const { existsSync, copySync }              = require('fs-extra')
+const { NETLIFY_PUBLISH_PATH, PUBLIC_PATH } = require('./config')
+
+// Copy files from public folder to Netlify publish folder
+const copyPublicFiles = () => {
+  // Abort if no public/ folder
+  if(!existsSync(PUBLIC_PATH))
+    return
+
+  // Perform copy operation
+  console.log(`\x1b[1m🌍️ Copying ${PUBLIC_PATH} folder to ${NETLIFY_PUBLISH_PATH}\x1b[22m`)
+  copySync(PUBLIC_PATH, NETLIFY_PUBLISH_PATH)
+}
+
+module.exports = copyPublicFiles

lib/copyPublicFiles.js

@@ -0,0 +1,33 @@
+const path = require('path')
+
+// Generate the Netlify Function name for the given file path.
+// The file path will be pages/directory/subdirectory/[id].js
+// The function name will be next_directory_subdirectory_[id]
+// We do this because every function needs to be at the top-level, i.e.
+// nested functions are not allowed.
+const getNetlifyFunctionName = (filePath) => {
+
+  // Remove pages/ from file path:
+  // pages/directory/page.js > directory/page.js
+  const relativeFilePath              = path.relative("pages", filePath)
+
+  // Extract directory path and file name without extension
+  const { dir: directoryPath, name }  = path.parse(relativeFilePath)
+
+  // Combine next, directory path, and file name:
+  // next/directory/page
+  const filePathWithoutExtension      = path.join("next", directoryPath, name)
+
+  // Replace slashes with underscores:
+  // next/directory/page > next_directory_page
+  let functionName = filePathWithoutExtension.split(path.sep).join("_")
+
+  // Netlify Function names may not contain periods or square brackets.
+  // To be safe, we keep only alphanumeric characters and underscores.
+  // See: https://community.netlify.com/t/failed-to-upload-functions-file-function-too-large/3549/8
+  functionName = functionName.replace(/[^\w\d]/g, "")
+
+  return functionName
+}
+
+module.exports = getNetlifyFunctionName

lib/getNetlifyFunctionName.js

@@ -1,33 +1,13 @@
 // TEMPLATE: This file will be copied to the Netlify functions directory when
-//           running next-on-netlify/run.js
+//           running next-on-netlify
 
-const compat      = require("next-aws-lambda")
-const { routes }  = require("./routes.json")
+// Compatibility wrapper for NextJS page
+const compat  = require("next-aws-lambda")
+// Load the NextJS page
+const page    = require("./nextJsPage")
 
-// We have to require all pages here so that Netlify's zip-it-and-ship-it
-// method will bundle them. That makes them available for our dynamic require
-// statement later.
-// We wrap this require in if(false) to make sure it is *not* executed when the
-// function runs.
-if (false) {
-  require("./allPages")
-}
-
-// Look through all routes and check each regex against the request URL
-const getRoute = path => {
-  route = routes.find(({ regex }) => {
-    const re = new RegExp(regex, "i");
-    return re.test(path);
-  })
-
-  // Return the route or the error page
-  return route || { file: "pages/_error.js" }
-}
-
-// There are some minor differences between Netlify and AWS, such as AWS having
-// support for multi-value headers.
-// next-aws-lambda is made for AWS, so we need to resolve those differences to
-// make everything work with Netlify.
+// next-aws-lambda is made for AWS. There are some minor differences between
+// Netlify and AWS which we resolve here.
 const callbackHandler = callback => (
   // The callbackHandler wraps the callback
   (argument, response) => {
@@ -57,17 +37,6 @@ exports.handler = (event, context, callback) => {
   const { path } = event
   console.log("[request]", path)
 
-  // Identify the file to render
-  const { file } = getRoute(path)
-  console.log("[render] ", file)
-
-  // Load the page to render
-  // Do not do this: const page = require(`./${file}`)
-  // Otherwise, Netlify's zip-it-and-ship-it will attempt to bundle "./"
-  // into the function's zip folder and the build will fail
-  const pathToFile = `./${file}`
-  const page = require(pathToFile)
-
   // Render the page
   compat(page)(
     {

lib/routerTemplate.js renamed to lib/netlifyFunctionTemplate.js

@@ -0,0 +1,15 @@
+const { emptyDirSync }                                  = require('fs-extra')
+const { NETLIFY_PUBLISH_PATH, NETLIFY_FUNCTIONS_PATH }  = require('./config')
+
+// Empty existing publish and functions folders
+const prepareFolders = () => {
+  console.log("\x1b[1m🚀 Next on Netlify 🚀\x1b[22m")
+  console.log("   Functions directory:", NETLIFY_PUBLISH_PATH)
+  console.log("   Publish directory:  ", NETLIFY_FUNCTIONS_PATH)
+  console.log("   Make sure these are set in your netlify.toml file.")
+
+  emptyDirSync(NETLIFY_PUBLISH_PATH)
+  emptyDirSync(NETLIFY_FUNCTIONS_PATH)
+}
+
+module.exports = prepareFolders

lib/prepareFolders.js

@@ -0,0 +1,49 @@
+const path                                    = require('path')
+const { join }                                = path
+const { copySync, existsSync, readJSONSync }  = require('fs-extra')
+const { NEXT_DIST_DIR, NETLIFY_PUBLISH_PATH } = require('./config')
+
+// Identify all pages that have been pre-rendered and copy each one to the
+// Netlify publish directory.
+const setupHtmlPages = () => {
+  console.log(`\x1b[1m🔥 Writing pre-rendered HTML pages to ${NETLIFY_PUBLISH_PATH}\x1b[22m`)
+
+  // Read pages manifest that tells us which pages exist
+  const pagesManifest = readJSONSync(
+    join(NEXT_DIST_DIR, "serverless", "pages-manifest.json")
+  )
+
+  // Eliminate duplicates from pages manifest
+  const files       = Object.values(pagesManifest)
+  const uniqueFiles = [...new Set(files)]
+
+  // Identify HTML pages
+  const htmlFiles = uniqueFiles.filter(file => file.endsWith(".html"))
+
+  // Copy each page to the Netlify publish directory
+  htmlFiles.forEach(file => {
+    console.log("  ", file)
+
+    // The path to the file, relative to the pages directory
+    const relativePath = path.relative("pages", file)
+
+    copySync(
+      join(NEXT_DIST_DIR,         "serverless", "pages",relativePath),
+      join(NETLIFY_PUBLISH_PATH,  relativePath),
+      {
+        overwrite: false,
+        errorOnExist: true
+      }
+    )
+  })
+
+  // Copy 404.html to directory root
+  // This is a temporary workaround. Currenly, Netlify (deployed) expects the
+  // 404.html file in the publish folder, while netlify-cli dev expects it at
+  // the directory root. In order to cover both cases, we copy the 404.html to
+  // both locations until this is fixed.
+  if(existsSync(join(NETLIFY_PUBLISH_PATH, "404.html")))
+    copySync(join(NETLIFY_PUBLISH_PATH, "404.html"), join(".", "404.html"))
+}
+
+module.exports = setupHtmlPages