Deploying with serverless functions
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[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.