From 92da22ded9539c702635032630d27f334ef88060 Mon Sep 17 00:00:00 2001
From: danielconde <danielconde9@gmail.com>
Date: Sat, 23 Mar 2019 14:27:34 +0000
Subject: [PATCH] feat: add support for custom 404 error pages

---
 classes/NextPage.js                           | 17 ++++++++++++-
 classes/__tests__/NextPage.test.js            | 25 +++++++++++++++++++
 .../basic-next-serverless-app/pages/_error.js |  9 +++++++
 integration/__tests__/local-deploy.test.js    | 17 ++++++++++---
 .../pages/_error.js                           |  9 +++++++
 lib/getNextPagesFromBuildDir.js               |  5 +---
 6 files changed, 74 insertions(+), 8 deletions(-)
 create mode 100644 examples/basic-next-serverless-app/pages/_error.js
 create mode 100644 integration/app-with-serverless-offline/pages/_error.js

diff --git a/classes/NextPage.js b/classes/NextPage.js
index 8bd46d0918..268bcd46c2 100644
--- a/classes/NextPage.js
+++ b/classes/NextPage.js
@@ -29,16 +29,31 @@ class NextPage {
   }
 
   get functionName() {
+    if (this.pageName === "_error") {
+      return "notFoundErrorPage";
+    }
+
     return this.pageName + "Page";
   }
 
+  get pageRoute() {
+    switch (this.pageName) {
+      case "index":
+        return "/";
+      case "_error":
+        return "/{proxy+}";
+      default:
+        return this.pageName;
+    }
+  }
+
   get serverlessFunction() {
     const configuration = {
       handler: this.pageHandler,
       events: [
         {
           http: {
-            path: this.pageName === "index" ? "/" : this.pageName,
+            path: this.pageRoute,
             method: "get"
           }
         }
diff --git a/classes/__tests__/NextPage.test.js b/classes/__tests__/NextPage.test.js
index ef6cd1c231..6c04dd38d7 100644
--- a/classes/__tests__/NextPage.test.js
+++ b/classes/__tests__/NextPage.test.js
@@ -31,6 +31,31 @@ describe("NextPage", () => {
     });
   });
 
+  describe("When is the _error page", () => {
+    const pagesDir = "/build/serverless/pages";
+    const pagePath = `${pagesDir}/_error.js`;
+    let page;
+
+    beforeEach(() => {
+      page = new NextPage(pagePath);
+    });
+
+    describe("#serverlessFunction", () => {
+      it("should name the function notFoundErrorPage", () => {
+        expect(page.serverlessFunction.notFoundErrorPage).toBeDefined();
+      });
+
+      it("should return function http event path /{proxy+}", () => {
+        const { events } = page.serverlessFunction.notFoundErrorPage;
+
+        expect(events).toHaveLength(1);
+
+        const httpEvent = events[0].http;
+        expect(httpEvent.path).toEqual("/{proxy+}");
+      });
+    });
+  });
+
   describe("When a new instance is created", () => {
     const pagesDir = "/build/serverless/pages";
     const pagePath = `${pagesDir}/admin.js`;
diff --git a/examples/basic-next-serverless-app/pages/_error.js b/examples/basic-next-serverless-app/pages/_error.js
new file mode 100644
index 0000000000..6590e9405c
--- /dev/null
+++ b/examples/basic-next-serverless-app/pages/_error.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+class Error extends React.Component {
+  render() {
+    return <p>404 not found. (╯°□°)╯︵ ┻━┻</p>;
+  }
+}
+
+export default Error;
diff --git a/integration/__tests__/local-deploy.test.js b/integration/__tests__/local-deploy.test.js
index 880166063e..ab43f910ee 100644
--- a/integration/__tests__/local-deploy.test.js
+++ b/integration/__tests__/local-deploy.test.js
@@ -16,7 +16,7 @@ describe("Local Deployment Tests (via serverless-offline)", () => {
     slsOffline.kill();
   });
 
-  it("should return the index page content", () => {
+  it("should render the index page", () => {
     expect.assertions(2);
 
     return httpGet("http://localhost:3000").then(({ response, statusCode }) => {
@@ -25,7 +25,7 @@ describe("Local Deployment Tests (via serverless-offline)", () => {
     });
   });
 
-  it("should return the about page content", () => {
+  it("should render the about page", () => {
     expect.assertions(2);
 
     return httpGet("http://localhost:3000/about").then(
@@ -36,7 +36,7 @@ describe("Local Deployment Tests (via serverless-offline)", () => {
     );
   });
 
-  it("should return the post page content using custom route with slug", () => {
+  it("should render post page when using custom route with slug", () => {
     expect.assertions(2);
 
     return httpGet("http://localhost:3000/post/hello").then(
@@ -46,4 +46,15 @@ describe("Local Deployment Tests (via serverless-offline)", () => {
       }
     );
   });
+
+  it("should render _error page when 404", () => {
+    expect.assertions(2);
+
+    return httpGet("http://localhost:3000/path/does/not/exist").then(
+      ({ response, statusCode }) => {
+        expect(statusCode).toBe(404);
+        expect(response).toContain("404 error page");
+      }
+    );
+  });
 });
diff --git a/integration/app-with-serverless-offline/pages/_error.js b/integration/app-with-serverless-offline/pages/_error.js
new file mode 100644
index 0000000000..4203744e57
--- /dev/null
+++ b/integration/app-with-serverless-offline/pages/_error.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+class Error extends React.Component {
+  render() {
+    return <p>404 error page</p>;
+  }
+}
+
+export default Error;
diff --git a/lib/getNextPagesFromBuildDir.js b/lib/getNextPagesFromBuildDir.js
index 8fd61dc066..f29362f6e2 100644
--- a/lib/getNextPagesFromBuildDir.js
+++ b/lib/getNextPagesFromBuildDir.js
@@ -17,10 +17,7 @@ module.exports = async (buildDir, pageConfig = {}) => {
   const buildFiles = await readdirAsync(buildDir);
 
   const nextPages = buildFiles
-    .filter(bf => {
-      console.log(bf);
-      return !excludeBuildFiles.includes(bf);
-    })
+    .filter(bf => !excludeBuildFiles.includes(bf))
     .map(fileName => {
       const pagePath = path.join(buildDir, fileName);