Watching: Next.js & Lambda @ Edge with Serverless Components

From: Serverless for Frontend Developers

The Serverless Website Component with React

Introduction to Plugins

To make the most of this tutorial series,  create a Serverless Framework PRO account for free

Lesson Info

This video will show you how to get a Next.js website deployed on Lambda@Edge. This will let you start to leverage the benefits of edge computing to deliver content to your viewers faster and more dynamically.

Transcript

Hi, let's install a Next.js application and go ahead and deploy it in AWS using the serverless components feature of the Serverless Framework.

We'll start by getting our basic Next.js application installed with NPX create next app and then we'll just run this to create our application and follow the steps here. I'm going to call this serverless-nextjs and this should go ahead and get a basic Next.js project installed in my local directory.

Then I'm going to have to go ahead and change directories into that application and after this we can install our development dependency of the serverless component that we'll be using. So I'll do this with NPM install with i and then serverless-next.js And the - capital D flag to save this as a dependency of my project. This will save it as a development dependency and install everything I need here.

Once this is finished, we can also go ahead and expand our window here and this will show us everything we've just installed. This should be a basic project for our application with Next.js and if we wanted to change any of the other content, we could go over to the pages section, maybe edit the index.html file the change from the title of home to serverless-nextjs and then I can go ahead and save this.

Once this finishes installing our dependencies below, we'll be able to also add one additional file into our application and that's the next.config.js File. So I'm going to do this from the command line. I'm going to list out the contents of the directory and make sure I'm at the top of my application and then I'm going to touch the next.config.js file.

Once I do this, it should appear over here, so I'm going to click into it and inside of here I can paste in the configuration I need from an example. In this case I'll make sure all of the examples for this video are included in the links below. Inside of here you'll see that I've just included a module exports and the target of serverless. What this is going to mean is that we're set up with our next configuration so that we can actually deploy to a serverless environment.

Let's go ahead and do one other thing to make sure that the Next.js component works properly. I'm going to need to add a few different files to configure the component. The first one is actually going to be to have my environment variables for AWS set up, so I'm going to touch a file called .env and eventually I'm also going to need a file called serverless.yml, which is the exact same file that you've been familiar with if you're using the Serverless Framework.

So I'm going to touch that file too. And with both of those files created, I can go ahead and hop into serverless.yml And to the .env file. For the .env file, we're going to need to paste an AWS credentials that we've been given from an administrator account or another account with enough privileges to act on many of the different services that are required by the Next.js component.

After I pasted the contents of this file in here, I can go ahead and save the file and then close it back out and don't worry. Those credentials are short-lived and I'll be removing them. After making this video. Be sure not to expose these credentials in source control or anything like that as they are very important to protect.

The last file I want you to take a look at is serverless.yml and in serverless.yml we're going to paste in the entire configuration that we need for this particular component and honestly that's it.

That's all we have to do just to get the basic application started. Once we go down to our command line, we can run the final step which is to run NPX serverless. This is going to run the serverless command using NPX and we're going to go ahead and deploy a bunch of different things to the AWS environment. In this case we're going to be deploying a CloudFront distribution, creating an S3 bucket and configuring everything together so that we can have a server side rendered application with Next.js along with static components of that application hosted inside of S3 static website hosting and forwarded to from CloudFront.

Another thing we could do is later on if we wanted to configure this with a custom domain, but get out a few more lines of configuration below just to have this be a custom domain as well.

You can already see that I've created this app URL here which will allow me to go open this up in my browser and it currently shows us that the site can't be reached. This means that the CloudFront distribution just hasn't finished spinning everything up and all the DNS hasn't properly propagated so that we can visit everything that we just deployed. But this could take up to 30 minutes, so don't worry too much if you don't see it initially and subsequent deploys will happen much more quickly.

Once we've taken a look at this, we can also go inside of the AWS dashboard to see what's currently deploying. You'll notice I have this one deployment here that starts with D1 and goes WY right after that and that matches exactly what the very beginning of our CloudFront distribution here. This means that currently we've managed to deploy an entire CloudFront distribution and it's currently in the in progress state.

That means it's still deploying out to that CloudFront distribution and that's why we're not seeing anything in the browser quite yet, but if we came back in a few more minutes we might start to see a bit more information. Similarly, if we go over to the S3 management console and we look for a bucket that was just created quite recently, let's go ahead and sort here.

We can see that this bucket right here has new files in it and now contains a next folder, static pages folder and a static folder and each of these different components or parts of the application that will allow us to route both static files through to S3 and also allow us to get other objects that we might need to render content throughout the application. In addition to this information, we can also see that if we go to services and over to Lambda, there was a function that was deployed just a few minutes ago that allows us to enable the Lambda@Edge resources for our function.

This is going to do is it's going to do server-side rendering for many parts of our frontend application actually enabling us to render pages close to the user and to have that benefit of server side rendering.

So hopefully this you an idea about how to get started with your application using Lambda@Edge and the Next.js Serverless component. There are a lot of other options for deploying your website's on AWS using the Serverless Framework, but keep this one in your arsenal just in case you need to do this in the future.

Get updated when a new course is released