Deploying with serverless functions
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[00:00 - 00:04] Deployment with serverless functions. Now the project is almost ready to be deployed on Vercel.
[00:05 - 00:12] We're going to have to push it to a repository on GitHub or GitLab. We'll define some environment variables for API configuration and we're ready to go.
[00:13 - 00:21] Let's start by checking the next config.js. This config should contain the images field that sets up how Next will handle our images.
[00:22 - 00:28] And the device sizes. This property tells Next what breakpoints we're going to consider in the app layout.
[00:29 - 00:31] Next we need to update request. Config.js.
[00:32 - 00:39] Right now it contains only a declaration for the local host. When deployed, the app won't be able to call API by that URL.
[00:40 - 00:45] We need to inject the real API URL in the config. For this we're going to use environment variables.
[00:46 - 00:57] By default, Next and Vercel don't expose any end variables to the client code for security reasons. But we can explicitly tell them to inject a variable into the client code using their next public prefix.
[00:58 - 01:03] Here we already use it for the host. Next public_versal_url.
[01:04 - 01:13] There is also a whole bunch of environment variables that Vercel exposes automatically for us. Among those variables is the Vercel_url or Next public_versal_url that we use here.
[01:14 - 01:18] That contains the real deployment URL. So first we check if it is a production.
[01:19 - 01:24] If there is, then we use HTTPS, otherwise we would use HTTP. And then we calculate the host.
[01:25 - 01:33] If Next public_versal_url exists, then we take it from the process "env", otherwise we use localhost 3000. Then we return the config.
[01:34 - 01:39] Base_url is protocol plus host/api. Pushing to GitHub.
[01:40 - 01:48] As an example of a remote repository, we'll use GitHub. Sign up or log in to your account on GitHub and create a new repository for this project.
[01:49 - 01:53] New repository, choose the repository name. Next, News.
[01:54 - 01:59] Next, Make it public. You can add readme and get it nor by default.
[02:00 - 02:04] The template should be node. And then you can press create repository.
[02:05 - 02:12] After the repository is created, push the code to it using these instructions. Let's copy them and paste in the terminal.
[02:13 - 02:20] When the source code is pushed to the repo, go to Vercel.com and create new account there. If you already have one, just log in.
[02:21 - 02:25] After you're logged in, you will be navigated to the dashboard. Here you will see the new project button.
[02:26 - 02:28] Click on it. Here choose import get repository.
[02:29 - 02:31] Next, News site. Import.
[02:32 - 02:38] Select the project name. Here you can also configure the build and output settings and environment variables.
[02:39 - 02:42] When you're done, press deploy. Then you will have to wait a little bit.
[02:43 - 02:48] And you should be able to click the view button deployment. And it will navigate you to your website.
[02:49 - 02:52] Congratulations, you've just deployed your first Next.js application to a Vers al.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)