feat: add support for custom 404 error pages

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"
           }
         }

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`;

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;

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");
+      }
+    );
+  });
 });

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;

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);