Merge pull request #25 from danielcondemarin/pages-subdir-support

feat: add support for nested page directories

Author: danielcondemarin

README.md

@@ -21,7 +21,7 @@ The plugin targets [Next 8 serverless mode](https://nextjs.org/blog/next-8/#serv
 - [Deploying a single page](#deploying-a-single-page)
 - [Overriding page configuration](#overriding-page-configuration)
 - [Custom page routing](#custom-page-routing)
-- [Custom 404 error page](#custom-404-error-page)
+- [Custom error page](#custom-error-page)
 - [Examples](#examples)
 - [Contributing](#contributing)
 
@@ -185,7 +185,18 @@ You can set any function property described [here](https://serverless.com/framew
 
 ## Custom page routing
 
-The default page route is `/{pageName}`. You may want to serve your page from a different path. This is possible by setting your own http path in the `pageConfig`. For example for `pages/post.js`:
+The default page routes follow the same convention as next `useFileSystemPublicRoutes` documented [here](https://nextjs.org/docs/#routing).
+
+E.g.
+
+| page                        | path                |
+| --------------------------- | ------------------- |
+| pages/index.js              | /                   |
+| pages/post.js               | /post               |
+| pages/blog/index.js         | /blog               |
+| pages/categories/uno/dos.js | /categories/uno/dos |
+
+You may want to serve your page from a different path. This is possible by setting your own http path in the `pageConfig`. For example for `pages/post.js`:
 
 ```js
 class Post extends React.Component {
@@ -220,16 +231,27 @@ custom:
                     slug: true
 ```
 
-## Custom 404 error page
+## Custom error page
 
-By default, Amazon API Gateway returns 403 responses when a given route doesn't exist. Instead, the plugin makes sure the [\_error page](https://nextjs.org/docs/#custom-error-handling) is rendered. That way you can customise how your 404 error page looks like.
+404 or 500 errors are handled both client and server side by a default component `error.js`, same as documented [here](https://github.com/zeit/next.js/#custom-error-handling).
 
 Simply add `pages/_error.js`:
 
 ```js
 class Error extends React.Component {
+  static getInitialProps({ res, err }) {
+    const statusCode = res ? res.statusCode : err ? err.statusCode : null;
+    return { statusCode };
+  }
+
   render() {
-    return <p>404 page not found. (╯°□°)╯︵ ┻━┻</p>;
+    return (
+      <p>
+        {this.props.statusCode
+          ? `An error ${this.props.statusCode} occurred on server (╯°□°)╯︵ ┻━┻`
+          : "An error occurred on client"}
+      </p>
+    );
   }
 }
 

__tests__/index.test.js

@@ -63,7 +63,7 @@ describe("ServerlessNextJsPlugin", () => {
 
         return plugin.buildNextPages().then(() => {
           expect(plugin.serverless.service.package.include).toContain(
-            `${nextConfigDir}/sls-next-build/*`
+            `${nextConfigDir}/sls-next-build/**`
           );
         });
       });
@@ -79,7 +79,7 @@ describe("ServerlessNextJsPlugin", () => {
 
         return plugin.buildNextPages().then(() => {
           expect(plugin.serverless.service.package.include).toContain(
-            `${nextConfigDir}/sls-next-build/*`
+            `${nextConfigDir}/sls-next-build/**`
           );
         });
       });

classes/NextPage.js

@@ -37,13 +37,22 @@ class NextPage {
   }
 
   get pageRoute() {
+    const pathSegments = this.pagePath.split(path.sep);
+
     switch (this.pageName) {
       case "index":
         return "/";
       case "_error":
         return "/{proxy+}";
       default:
-        return this.pageName;
+        // handle pages at any subdir level
+        // e.g. build/post.js
+        //      build/categories/post.js
+        //      build/categories/fridge/index.js
+        return pathSegments
+          .slice(1, pathSegments.length - 1)
+          .concat([this.pageName])
+          .join("/");
     }
   }
 

classes/__tests__/NextPage.test.js

@@ -3,16 +3,16 @@ const NextPage = require("../NextPage");
 describe("NextPage", () => {
   describe("#constructor", () => {
     it("should set a pagePath", () => {
-      const pagePath = "/build/serverless/pages/home.js";
+      const pagePath = "build/home.js";
       const page = new NextPage(pagePath);
 
       expect(page.pagePath).toEqual(pagePath);
     });
   });
 
   describe("When is the index page", () => {
-    const pagesDir = "/build/serverless/pages";
-    const pagePath = `${pagesDir}/index.js`;
+    const buildDir = "build";
+    const pagePath = `${buildDir}/index.js`;
     let page;
 
     beforeEach(() => {
@@ -32,8 +32,8 @@ describe("NextPage", () => {
   });
 
   describe("When is the _error page", () => {
-    const pagesDir = "/build/serverless/pages";
-    const pagePath = `${pagesDir}/_error.js`;
+    const buildDir = "build";
+    const pagePath = `${buildDir}/_error.js`;
     let page;
 
     beforeEach(() => {
@@ -56,33 +56,56 @@ describe("NextPage", () => {
     });
   });
 
+  describe("When is a nested page", () => {
+    const buildDir = "build";
+    const pagePath = `${buildDir}/categories/fridge/fridges.js`;
+    let page;
+
+    beforeEach(() => {
+      page = new NextPage(pagePath);
+    });
+
+    describe("#serverlessFunction", () => {
+      it("should have URI path matching subdirectories", () => {
+        const { events } = page.serverlessFunction.fridgesPage;
+
+        expect(events).toHaveLength(1);
+
+        const httpEvent = events[0].http;
+
+        expect(httpEvent.path).toEqual("categories/fridge/fridges");
+        expect(httpEvent.method).toEqual("get");
+      });
+    });
+  });
+
   describe("When a new instance is created", () => {
-    const pagesDir = "/build/serverless/pages";
-    const pagePath = `${pagesDir}/admin.js`;
+    const buildDir = "build";
+    const pagePath = `${buildDir}/admin.js`;
     let page;
 
     beforeEach(() => {
       page = new NextPage(pagePath);
     });
 
     it("should have pageCompatPath", () => {
-      expect(page.pageCompatPath).toEqual(`${pagesDir}/admin.compat.js`);
+      expect(page.pageCompatPath).toEqual(`${buildDir}/admin.compat.js`);
     });
 
     it("should return pageOriginalPath", () => {
-      expect(page.pageOriginalPath).toEqual(`${pagesDir}/admin.original.js`);
+      expect(page.pageOriginalPath).toEqual(`${buildDir}/admin.original.js`);
     });
 
     it("should return pageDir", () => {
-      expect(page.pageDir).toEqual(pagesDir);
+      expect(page.pageDir).toEqual(buildDir);
     });
 
     it("should return pageName", () => {
       expect(page.pageName).toEqual("admin");
     });
 
     it("should return pageHandler", () => {
-      expect(page.pageHandler).toEqual("/build/serverless/pages/admin.render");
+      expect(page.pageHandler).toEqual("build/admin.render");
     });
 
     it("should return pageFunctionName", () => {
@@ -97,7 +120,7 @@ describe("NextPage", () => {
 
       it("should return function handler", () => {
         const { handler } = page.serverlessFunction.adminPage;
-        expect(handler).toEqual(`${pagesDir}/admin.render`);
+        expect(handler).toEqual(`${buildDir}/admin.render`);
       });
 
       it("should return function http event", () => {

examples/basic-next-serverless-app/pages/categories/uno/dos.js

@@ -0,0 +1,13 @@
+import React from "react";
+import "../../styles/home.css";
+
+// categories/uno/dos
+function CategoriesUnoDos() {
+  return (
+    <div className="homePage">
+      <div>Awesome! Nested routes ⚡</div>
+    </div>
+  );
+}
+
+export default CategoriesUnoDos;

index.js

@@ -53,7 +53,7 @@ class ServerlessNextJsPlugin {
     const servicePackage = this.serverless.service.package;
 
     servicePackage.include = servicePackage.include || [];
-    servicePackage.include.push(path.join(pluginBuildDir.buildDir, "*"));
+    servicePackage.include.push(path.join(pluginBuildDir.buildDir, "**"));
     return build(pluginBuildDir, this.getPluginConfigValue("pageConfig")).then(
       nextPages => this.setNextPages(nextPages)
     );

integration/__tests__/local-deploy.test.js

@@ -47,6 +47,17 @@ describe("Local Deployment Tests (via serverless-offline)", () => {
     );
   });
 
+  it("should render nested fridges page", () => {
+    expect.assertions(2);
+
+    return httpGet("http://localhost:3000/categories/fridge/fridges").then(
+      ({ response, statusCode }) => {
+        expect(statusCode).toBe(200);
+        expect(response).toContain("Fridges");
+      }
+    );
+  });
+
   it("should render _error page when 404", () => {
     expect.assertions(2);