Serverless-next.js: AWS Gateway Resource's path part only allow a-zA-Z0-9._- and curly braces at the beginning and the end.

[gustavorps]

Describe the bug
I'm trying to use Dynamic Routing feature to have a urls like this in the future /survey/uuid-123, /survey/uuid-123/dashboard, /survey/uuid-123/edit, etc.
In local development works but when I try to deploy on AWS I get an erro from ApiGatewayResourceUuidVarhtml.

To Reproduce
Steps to reproduce the behavior:

1. Create a directory structure like this
   ├── pages │ └── [uuid] │ └── index.js └── serverless.yml
2. Edit your serverless.ymllike this
   ```
   service: web-survey
   stage: dev

provider:
  name: aws
  runtime: nodejs10.x
  memorySize: 128

plugins:
  - serverless-nextjs-plugin

custom:
  serverless-nextjs:
    routes:
      - src: "[uuid]/index.js"
        path: "{uuid}"
        request:
          parameters:
            paths:
              uuid: true

package:
  exclude:
    - ./**
```

1. See the error
   ```
   Serverless: Operation failed!
   Serverless: View the full error output: https://us-east-1.console.aws.amazon.com/cloudformation/home?region=us-east-1#/stack/detail?stackId=arn%3Aaws%3Acloudformation%3Aus-east-1%3A420353426084%3Astack%2Ffbhunter-applications-web-survey-dev%2Fdbd6c9a0-eec7-11e9-80a7-0e03eb938c18

  Serverless Error ---------------------------------------

  An error occurred: ApiGatewayResourceUuidVarhtml - Resource's path part only allow a-zA-Z0-9._- and curly braces at the beginning and the end. (Service: AmazonApiGateway; Status Code: 400; Error Code: BadRequestException; Request ID: a135c4a1-6b4b-4b71-93c9-497ad89a8850).
```

Expected behavior
Finish the deploy and able to access the page uuid.awsserver.com/uuid-123

Desktop (please complete the following information):

Operating System:          linux
Node Version:              10.15.1
Framework Version:         1.54.0
Plugin Version:            3.1.2
SDK Version:               2.1.2
Components Core Version:   1.1.1
Components CLI Version:    1.2.3

package.json

  "devDependencies": {
    "serverless-nextjs-plugin": "^2.4.0"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "next": "^9.1.1",
    "next-server": "^9.0.5",
    "node-sass": "^4.12.0",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "tripetto-collector": "^1.7.0",
    "tripetto-collector-rolling": "^2.1.14"
  }

[EugeneDraitsev]

I have same issue with Dynamic Routing. Another (maybe simpler way to reproduce):

1. Create serverless.yml

service: dynamic-routes

provider:
  name: aws
  stage: prod

plugins:
  - serverless-nextjs-plugin

package:
  exclude:
    - ./**

1. Pages structure:

├── pages
│   └── chat
│       └── [id].js
└── serverless.yml

1. Run sls deploy and get an error:

  An error occurred: ApiGatewayResourceChatIdVarhtml - Resource's path part only all
ow a-zA-Z0-9._- and curly braces at the beginning and the end. (Service: AmazonApiGa
teway; Status Code: 400; Error Code: BadRequestException; Request ID: a998a250-17e5-
4969-a1bf-143b1f96cdc5).

serverless-nextjs-plugin version is ^2.4.0

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[EugeneDraitsev]

Looks like it fixed in ^2.5.2-alpha.0

[isaquebc]

Same here
serverless.yml

provider:
  name: aws
  runtime: nodejs12.x
  stage: ${self:custom.secrets.NODE_ENV}
  region: us-west-2
package:
  exclude:
    - ./**
plugins:
  - serverless-offline
  - serverless-nextjs-plugin
custom:
  secrets: ${file(secrets.json)}
  apigwBinary:
    types:
      - '*/*'
  customDomain:
    domainName: ${self:custom.secrets.DOMAIN}
    certificateName: '*.domain'
    basePath: '/'
    stage: ${self:custom.secrets.NODE_ENV}
    createRoute53Record: true
    endpointType: 'regional'
  serverless-nextjs:
    customHandler: ./handler.js

handler.js

const compat = require("next-aws-lambda");

module.exports = (page) => {
  const handler = (event, context) => {
    // do any stuff you like

    // this makes sure the next page renders
    const responsePromise = compat(page)(event, context);

    // do any other stuff you like

    return responsePromise;
  };
  return handler;
};

error

. . .
. . .
Serverless Nextjs: Cleaning up tmp build folder ...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Uploading service name.zip file to S3 (8.58 MB)...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
......................................................................................
Serverless: Operation failed!
Serverless: View the full error output: https://link...

  Serverless Error ---------------------------------------

  An error occurred: ApiGatewayResourceCategoryTagVarhtml - Resource's path part only allow a-zA-Z0-9._- and curly braces at the beginning and the end. (Service: AmazonApiGateway; Status Code: 400; Error Code: BadRequestException; Request ID: ID-ID).

  Get Support --------------------------------------------
     Docs:          docs.serverless.com
     Bugs:          github.com/serverless/serverless/issues
     Issues:        forum.serverless.com

  Your Environment Information ---------------------------
     Operating System:          linux
     Node Version:              12.14.1
     Framework Version:         1.69.0
     Plugin Version:            3.6.10
     SDK Version:               2.3.0
     Components Version:        2.30.6

[niz11]

Same here.
Using "serverless-nextjs-plugin"

serverless.yml

service: ${self:custom.name}
provider:
  name: aws
  runtime: nodejs10.x
  stage: ${opt:stage, 'dev'}
  region: 'eu-central-1'

plugins:
  - serverless-nextjs-plugin

custom:
  name: server-crm
  serverless-nextjs: 
    assetsBucketName: 'server-crm'

package:
  exclude:
    - ./**

[onhate]

The same is happening to me, the PathPart contains {} which seems invalid to AWS

"ApiGatewayResourceTemplatesTemplateidVarhtml": {
      "Type": "AWS::ApiGateway::Resource",
      "Properties": {
        "ParentId": {
          "Ref": "ApiGatewayResourceTemplates"
        },
        "PathPart": "{templateId}.html",
        "RestApiId": {
          "Ref": "ApiGatewayRestApi"
        }
      }
    },