feat: add support for custom page routes

Author: danielcondemarin

README.md

@@ -20,6 +20,7 @@ The plugin targets [Next 8 serverless mode](https://nextjs.org/blog/next-8/#serv
 - [Deploying](#deploying)
 - [Deploying a single page](#deploying-a-single-page)
 - [Overriding page configuration](#overriding-page-configuration)
+- [Custom page routing](#custom-page-routing)
 - [Examples](#examples)
 
 ## Motivation
@@ -154,6 +155,43 @@ The example above will deploy the `about` page function with a smaller `memorySi
 
 You can set any function property described [here](https://serverless.com/framework/docs/providers/aws/guide/functions#configuration). The values provided will be merged onto the plugin defaults.
 
+## 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 page http path in the `pageConfig`. For example for `pages/post.js`:
+
+```js
+class Post extends React.Component {
+  static async getInitialProps({ query }) {
+    return {
+      slug: query.slug
+    };
+  }
+  render() {
+    return <h1>Post page: {this.props.slug}</h1>;
+  }
+}
+
+export default Post;
+```
+
+```yml
+plugins:
+  - serverless-nextjs-plugin
+
+custom:
+  serverless-nextjs:
+    nextConfigDir: ./
+    pageConfig:
+      post:
+        events:
+          - http:
+              path: post/{slug}
+              request:
+                parameters:
+                  paths:
+                    slug: true
+```
+
 ## Examples
 
 See the `examples/` directory.

examples/basic-next-serverless-app/pages/post.js

@@ -0,0 +1,12 @@
+class Post extends React.Component {
+  static async getInitialProps({ query }) {
+    return {
+      slug: query.slug
+    };
+  }
+  render() {
+    return <h1>Post page: {this.props.slug}</h1>;
+  }
+}
+
+export default Post;

examples/basic-next-serverless-app/serverless.yml

@@ -14,6 +14,15 @@ plugins:
 custom:
   serverless-nextjs:
     nextConfigDir: ./
+    pageConfig:
+      post:
+        events:
+          - http:
+              path: post/{slug}
+              request:
+                parameters:
+                  paths:
+                    slug: true
 
 package:
   # exclude everything

integration/__tests__/local-deploy.test.js

@@ -36,13 +36,13 @@ describe("Local Deployment Tests (via serverless-offline)", () => {
     );
   });
 
-  it("should return the post page content using custom route with id", () => {
+  it("should return the post page content using custom route with slug", () => {
     expect.assertions(2);
 
-    return httpGet("http://localhost:3000/posts/2").then(
+    return httpGet("http://localhost:3000/post/hello").then(
       ({ response, statusCode }) => {
         expect(statusCode).toBe(200);
-        expect(response).toContain("Post page");
+        expect(response).toContain("Post page: <!-- -->hello");
       }
     );
   });

integration/app-with-serverless-offline/pages/post.js

@@ -1,7 +1,14 @@
 import React from "react";
 
-function Post() {
-  return <div>Post page</div>;
+class Post extends React.Component {
+  static async getInitialProps({ query }) {
+    return {
+      slug: query.slug
+    };
+  }
+  render() {
+    return <h1>Post page: {this.props.slug}</h1>;
+  }
 }
 
 export default Post;

integration/app-with-serverless-offline/serverless.yml

@@ -15,11 +15,11 @@ custom:
       post:
         events:
           - http:
-              path: posts/{id}
+              path: post/{slug}
               request:
                 parameters:
                   paths:
-                    id: true
+                    slug: true
 
 package:
   # exclude everything

lib/__tests__/compatLayer.request.test.js

@@ -101,6 +101,37 @@ describe("compatLayer.request", () => {
     );
   });
 
+  it('event pathParameters { foo: "bar", bar: "baz" }', () => {
+    const { req } = create({
+      requestContext: {
+        path: "/"
+      },
+      pathParameters: {
+        foo: "bar",
+        bar: "baz"
+      }
+    });
+
+    expect(req.url).toEqual("/?foo=bar&bar=baz");
+  });
+
+  it("event pathParameters and queryString", () => {
+    const { req } = create({
+      requestContext: {
+        path: "/"
+      },
+      multiValueQueryStringParameters: {
+        abc: "def"
+      },
+      pathParameters: {
+        foo: "bar",
+        bar: "baz"
+      }
+    });
+
+    expect(req.url).toEqual("/?abc=def&foo=bar&bar=baz");
+  });
+
   it("request method", () => {
     const { req } = create({
       requestContext: {

lib/compatLayer.js

@@ -16,10 +16,28 @@ const reqResMapper = (event, callback) => {
     ""
   );
 
+  let qs = "";
+
   if (event.multiValueQueryStringParameters) {
-    req.url +=
-      "?" + queryString.stringify(event.multiValueQueryStringParameters);
+    qs += queryString.stringify(event.multiValueQueryStringParameters);
+  }
+
+  if (event.pathParameters) {
+    const pathParametersQs = queryString.stringify(event.pathParameters);
+
+    if (qs.length > 0) {
+      qs += `&${pathParametersQs}`;
+    } else {
+      qs += pathParametersQs;
+    }
   }
+
+  const hasQueryString = qs.length > 0;
+
+  if (hasQueryString) {
+    req.url += `?${qs}`;
+  }
+
   req.method = event.httpMethod;
   req.rawHeaders = [];
   req.headers = {};