![\"my](\"/static/my-image.png\")
\n}\n\nexport default MyImage\n```\n\nTo serve static files from the root directory you can add a folder called public and reference those files from the root, e.g: /robots.txt.\n\nNote that for this to work, an S3 bucket needs to be provisioned as per [hosting-static-assets](#hosting-static-assets).\n\n**For production deployments, enabling CloudFront is recommended:**\n\n```yml\n# serverless.yml\nplugins:\n - serverless-nextjs-plugin\n\ncustom:\n serverless-nextjs:\n assetsBucketName: \"your-bucket-name\"\n cloudFront: true\n```\n\nBy doing this, a CloudFront distribution will be created in front of your next application to serve any static assets from S3 and the pages from Api Gateway.\n\nNote that deploying the stack for the first time will take considerably longer, as CloudFront takes time propagating the changes, typically 10 - 20mins.\n\nYou can provide your own configuration for the CloudFront distribution:\n\n```yml\n# serverless.yml\nplugins:\n - serverless-nextjs-plugin\n\ncustom:\n serverless-nextjs:\n assetsBucketName: \"your-bucket-name\"\n cloudFront: ${file(cloudfront-override.yml)}\n```\n\n```yml\n# cloudfront-override.yml\n# e.g. add custom domain name\nProperties:\n DistributionConfig:\n Aliases:\n - my.alias.com\n ViewerCertificate:\n AcmCertificateArn: arn:aws:acm:xxxx\n ...\n```\n\nThe configuration provided will be merged onto the defaults in `packages/serverless-plugin/resources/cloudfront.yml`.\n\n## Deploying\n\n`serverless deploy`\n\nWhen running `serverless deploy` all your next pages will be automatically compiled, packaged and deployed.\n\nThe Lambda functions created for each page have by default the following configuration:\n\n```yml\nhandler: /path/to/page/handler.render\nevents:\n - http:\n path: pageName # home, about, etc. Unless is the index page which is served at /\n method: get\n - http:\n path: pageName # home, about, etc. Unless is the index page which is served at /\n method: head\n```\n\n## Overriding page configuration\n\nYou may want to have a different configuration for one or more of your page functions. This is possible by setting the `pageConfig` key in the plugin config:\n\n```yml\nplugins:\n - serverless-nextjs-plugin\n\ncustom:\n serverless-nextjs:\n pageConfig:\n about:\n memorySize: 512 # default is 1024\n home:\n timeout: 10 # default is 6\n```\n\nIf you need to change the default configuration, such as `memorySize`, `timeout` etc. use the top level `provider` which will override all the functions configuration. For example, to change the memorySize to 512MB:\n\n```yml\nprovider:\n name: aws\n runtime: nodejs8.10\n memorySize: 512\n ...\n```\n\nYou can also add configuration for all page functions by adding an asterisk entry (`*`) to `pageConfig`. This is particularly useful when you have other functions in your service (i.e. an `api`) aside from the page functions and you only want to apply configuration changes to the latter:\n\n```yml\nplugins:\n - serverless-nextjs-plugin\n\ncustom:\n serverless-nextjs:\n pageConfig:\n \"*\":\n layers:\n - arn:aws:lambda:${self:provider.region}:553035198032:layer:nodejs12:1\n```\n\nYou can set any function property described [here](https://serverless.com/framework/docs/providers/aws/guide/functions#configuration).\n\n## Custom page routing\n\nThe default page routes follow the same convention as next `useFileSystemPublicRoutes` documented [here](https://nextjs.org/docs/#routing).\n\nE.g.\n\n| page | path |\n| --------------------------- | ------------------- |\n| pages/index.js | / |\n| pages/post.js | /post |\n| pages/blog/index.js | /blog |\n| pages/categories/uno/dos.js | /categories/uno/dos |\n\nYou may want to serve your page from a different path. This is possible by setting your own http path in the `routes` config. For example for `pages/post.js`:\n\n```js\nclass Post extends React.Component {\n static async getInitialProps({ query }) {\n return {\n slug: query.slug\n };\n }\n render() {\n return \n {this.props.statusCode\n ? `An error ${this.props.statusCode} occurred on server (╯°□°)╯︵ ┻━┻`\n : \"An error occurred on client\"}\n
\n );\n }\n}\n\nexport default Error;\n```\n\n## Custom lambda handler\n\nIf you need to customize the lambda handler you can do so by providing a path to your own handler in the `customHandler` field. Note that it resolves the path to the custom handler relative to your `next.config.js`.\n\n```yml\nplugins:\n - serverless-nextjs-plugin\n\ncustom:\n serverless-nextjs:\n customHandler: ./handler.js\n```\n\nThe custom handler needs to look something like this:\n\n```js\nconst compat = require(\"@sls-next/next-aws-lambda\");\n\nmodule.exports = (page) => {\n const handler = (event, context) => {\n // do any stuff you like\n\n // this makes sure the next page renders\n const responsePromise = compat(page)(event, context);\n\n // do any other stuff you like\n\n return responsePromise;\n };\n return handler;\n};\n```\n\n## All plugin configuration options\n\n| Plugin config key | Type | Default Value | Description |\n| ----------------- | ------------------ | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| nextConfigDir | `string` | ./ | Path to parent directory of `next.config.js`. |\n| assetsBucketName | `string` | \\![](\"https://opencollective.com/serverless-nextjs-plugin/contributors.svg?width=890&button=false\")
\n\n### Financial Contributors\n\nBecome a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/serverless-nextjs-plugin/contribute)]\n\n#### Individuals\n\n![](\"https://opencollective.com/serverless-nextjs-plugin/individuals.svg?width=890\")
\n\n#### Organizations\n\nSupport this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/serverless-nextjs-plugin/contribute)]\n\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/0/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/1/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/2/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/3/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/4/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/5/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/6/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/7/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/8/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/serverless-nextjs-plugin/organization/9/avatar.svg\"){kind=avatar}
\n","readmeFilename":"README.md"}