|
| 1 | +# Serverless Nextjs Component |
| 2 | + |
| 3 | +A zero configuration Nextjs 9.0 [serverless component](https://github.com/serverless-components/) with full feature parity. |
| 4 | + |
| 5 | +[](http://www.serverless.com) |
| 6 | +[](https://travis-ci.org/danielcondemarin/serverless-nextjs-plugin) |
| 7 | +[](https://opencollective.com/serverless-nextjs-plugin) [](https://badge.fury.io/js/serverless-nextjs-plugin) |
| 8 | +[](https://coveralls.io/github/danielcondemarin/serverless-nextjs-plugin?branch=master) |
| 9 | +[](https://www.codacy.com/app/danielcondemarin/serverless-nextjs-plugin?utm_source=github.com&utm_medium=referral&utm_content=danielcondemarin/serverless-nextjs-plugin&utm_campaign=Badge_Grade) |
| 10 | + |
| 11 | +## Contents |
| 12 | + |
| 13 | +- [Motivation](#motivation) |
| 14 | +- [Design principles](#design-principles) |
| 15 | +- [Features](#features) |
| 16 | +- [Getting started](#getting-started) |
| 17 | +- [Custom domain name](#custom-domain-name) |
| 18 | +- [Architecture](#architecture) |
| 19 | +- [FAQ](#faq) |
| 20 | + |
| 21 | +### Motivation |
| 22 | + |
| 23 | +Since Nextjs 8.0, [serverless mode](https://nextjs.org/blog/next-8#serverless-nextjs) was introduced which provides a new low level API which projects like this can use to deploy onto different cloud providers. This project is a better version of the [serverless plugin](https://github.com/danielcondemarin/serverless-nextjs-plugin) which focuses on addressing core issues like [next 9 support](https://github.com/danielcondemarin/serverless-nextjs-plugin/issues/101), [better development experience](https://github.com/danielcondemarin/serverless-nextjs-plugin/issues/59), [the 200 CloudFormation resource limit](https://github.com/danielcondemarin/serverless-nextjs-plugin/issues/17) and [performance](https://github.com/danielcondemarin/serverless-nextjs-plugin/issues/13). |
| 24 | + |
| 25 | +### Design principles |
| 26 | + |
| 27 | +1. Zero configuration by default |
| 28 | + |
| 29 | +There is no configuration needed. You can extend defaults based on your application needs. |
| 30 | + |
| 31 | +2. Feature parity with nextjs |
| 32 | + |
| 33 | +Users of this component should be able to use nextjs development tooling, aka `next dev`. It is the component's job to deploy your application ensuring parity with all of next's feature we know and love. |
| 34 | + |
| 35 | +3. Fast deployments / no CloudFormation resource limits. |
| 36 | + |
| 37 | +With a simplified architecture and no use of CloudFormation, there are no limits to how many pages you can have in your application, plus deployment times are very fast! with the exception of CloudFront propagation times of course. |
| 38 | + |
| 39 | +### Features |
| 40 | + |
| 41 | +- [x] [Server side rendered pages at the Edge](https://github.com/zeit/next.js#fetching-data-and-component-lifecycle). |
| 42 | + Pages that need server side compute to render are hosted on Lambda@Edge. The component takes care of all the routing for you so there is no configuration needed. Because rendering happens at the CloudFront edge locations latency is very low! |
| 43 | +- [x] [API Routes](https://nextjs.org/docs#api-routes). |
| 44 | + Similarly to the server side rendered pages, API requests are also served from the CloudFront edge locations using Lambda@Edge. |
| 45 | +- [x] [Dynamic pages / route segments](https://github.com/zeit/next.js/#dynamic-routing). |
| 46 | +- [x] [Automatic prerendering](https://github.com/zeit/next.js/#automatic-prerendering). |
| 47 | + Statically optimised pages compiled by next are served from CloudFront edge locations with low latency and cost. |
| 48 | +- [x] [Client assets](https://github.com/zeit/next.js/#cdn-support-with-asset-prefix). |
| 49 | + Nextjs build assets `/_next/*` served from CloudFront. |
| 50 | +- [x] [User static / public folders](https://github.com/zeit/next.js#static-file-serving-eg-images). |
| 51 | + Any of your assets in the static or public folders are uploaded to S3 and served from CloudFront automatically. |
| 52 | + |
| 53 | +### Getting started |
| 54 | + |
| 55 | +Add your next application to the serverless.yml: |
| 56 | + |
| 57 | +```yml |
| 58 | +# serverless.yml |
| 59 | + |
| 60 | +myNextApplication: |
| 61 | + component: @serverless/nextjs |
| 62 | +``` |
| 63 | +
|
| 64 | +And simply deploy: |
| 65 | +
|
| 66 | +```bash |
| 67 | +$ serverless |
| 68 | +``` |
| 69 | + |
| 70 | +### Custom domain name (Coming soon!) |
| 71 | + |
| 72 | +In most cases you wouldn't want to use CloudFront's distribution domain to access your application. Instead, you can specify a custom domain name: |
| 73 | + |
| 74 | +```yml |
| 75 | +# serverless.yml |
| 76 | + |
| 77 | +myNextApplication: |
| 78 | + component: @serverless/nextjs |
| 79 | + inputs: |
| 80 | + domain: myfrontend.example.com |
| 81 | +``` |
| 82 | +
|
| 83 | +### Architecture |
| 84 | +
|
| 85 | +The application architecture deployed by the component is the following with minor variations: |
| 86 | +
|
| 87 | + |
| 88 | +
|
| 89 | +### FAQ |
| 90 | +
|
| 91 | +#### Is it one monolith Lambda or one Lambda per serverless page? |
| 92 | +
|
| 93 | +Only one Lambda is provisioned. There are a few reasons why: |
| 94 | +
|
| 95 | +- Simplicity. One lambda responsible for server side rendering or serving the API requests is very easy to manage. On the other hand, one lambda per page is a large surface area for a web app. For example a next application with 40+ pages would have resulted in 40+ lambda functions to maintain. |
| 96 | +
|
| 97 | +- Deployment speed. Is much faster building and deploying one lambda function. |
| 98 | +
|
| 99 | +Of course there are tradeoffs ... An architecture using one lambda per page in theory results in lower boot times. However, the implementation of this component is designed to ensure a minimum amount of compute happens at the Lambda@Edge. |
| 100 | +
|
| 101 | +#### How do I interact with other AWS Services within my app? |
| 102 | +
|
| 103 | +See `examples/dynamodb-crud` for an example Todo application that interacts with DynamoDB. |
| 104 | + |
| 105 | +#### Should I use the [serverless-nextjs-plugin](https://github.com/danielcondemarin/serverless-nextjs-plugin/tree/master/packages/serverless-nextjs-plugin) or this component? |
| 106 | + |
| 107 | +Users are enocouraged to use this component instead of the `serverless-nextjs-plugin`. This component was built and designed to fix issues the plugin has like the [CloudFormation resource limit](https://github.com/danielcondemarin/serverless-nextjs-plugin/issues/17). |
0 commit comments