Deploying with serverless functions

[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.