Welcome to part 9 of this tutorial series. This is the final part and in this bonus part of the series we will take a brief look at how to deploy our website to the internet.
This will span several topics, some of which deserve their own tutorial series, so I’ll try to explain each one as best as I can, but you may have to do some additional research on your own to fully understand each step.
On the other hand, if you are already familiar with Git and GitHub, this will be quite easy for you and you can just skim over the explanations and follow the steps real quick.
Let’s get started! 🚀
Step 1: Create a production build
The first thing we need to do is to create a production build of our website. This is a build that is optimized for performance and is ready to be deployed to the internet. We don’t technically have to do the build step ourselves, but it is likely there will be some kind of error during the build process (which is totally fine), so it is good to do it locally first to catch any errors.
To create a production build, run the following command:
npm run build
And here is my terminal output:
Actually, that was successful the first time around! If you get any errors, it will tell you what file it is and give you a specific error message. You can check out the specific file and also Google the error if you need any help figuring out what was wrong.
In my case, we can see it Compiled successfully, though it is warning us about the use of the <img> element as there is a more optimized version in Next.js. We can ignore this for now, but if you’re going to use a lot of images that you host yourself then this is something that could be optimized. As you probably used the same code as me, your code is likely also building without any errors, but if not, don’t despair. You will get it fixed! 🛠
Step 2: Creating a Git repository (not GitHub)
The next step is to create a Git repository for our project. This is a version control system that allows us to keep track of changes to our code and collaborate with others. We will not be using GitHub for this step (that is the next step), but we will be using Git itself. If you don’t have Git installed, you can download it from here. Make sure you download and install the correct version for your operating system.
If you’re not familiar with Git, you can think of it as a way to save snapshots of your code at different points in time. This allows you to go back to a previous version of your code if you make a mistake, or if you want to see how your code has changed over time. It also allows you to collaborate with others on the same codebase, by merging changes together and resolving conflicts.
You don’t need to understand Git in depth to follow along with our deployment here, but if you are interested in becoming a developer and not yet familiar with Git, it is a good idea to learn it as it is an essential tool for software development. Everyone and their dog uses Git in the web and software development fields, no kidding! 🐶
So assuming you already had or now have Git installed, let’s initialize a Git repository in our project folder. To do this, run the following command:
git init
This will create a new Git repository in your project folder. At this point the repository is empty. Before we commit any files to the repository, the first important step is always to create a .gitignore file. This file tells Git which files and folders to ignore when tracking changes to your code.
This is important because there are certain files and folders that we don’t want to include in our Git repository, such as the node_modules folder (which contains all of our dependencies) and the .next folder (which contains the output of our build process).
The reason is that anyone who needs to use this code repository can simply run npm install to install all the dependencies, and npm run build to create the production build. So we don’t need to include these files in our repository.
Luckily for us, Next.js already includes a .gitignore file in the project template, so we don’t need to create one ourselves. It also includes the .env.local file where we stored our API key, so you don’t have to worry about your API key being included in the code repository either. You can check out the .gitignore file Next.js created for you in your main project folder:
As you can see it is basically just a list of the files and folders to be ignored by git, hence the name .gitignore. If you ever need to add more files or folders to be ignored, you can simply add them to this file. If the file doesn’t exist, you can always create one and it will be auto-detected by Git.
Now that we have our empty repository and our .gitignore file in place, we can add all of our files to the repository and make a commit, which is a snapshot of our code at a specific point in time. First make sure your terminal is in the root of your project folder, and then run the following command:
git add .
This will simply add to the Git repository, all the files and folders in the current directory and all subdirectories. The . is a shorthand for the current directory. (So make sure you are in the root of your project folder when you run this command.)
If you accidentally made a mistake here, you can remove all files from the staging area by running git reset without any arguments. At this point, we don’t have a real commit yet, we just added the files to the staging area which means we are planning to commit them. If you want to see the staging area you can press the Git icon in VS Code on the left-hand sidebar and you will see something like this:
In your case, the list will display a lot more files and folders than in this screenshot. You can see that in my case I already made a bunch of commits and the only changes in my staging area are updates to this tutorial file I was writing at the time of this screenshot. 📝
So the staging area is showing us what we plan to commit. In order to actually make the commit or snapshot of our code at this point in time, you can either type a commit message in that Message box above the big blue button there and then press the big blue Commit button, or you can do it in the terminal by running the following command:
git commit -m "Initial commit"
In this command the -m flag stands for message and the message in quotes is the message you want to attach to the commit. This message should be a short description of the changes you made in this commit. In this case, we are making the initial commit, so we can just write “Initial commit” as the message. In subsequent commits you would typically write a small description of the changes you made in that commit compared to the previous commit.
Step 3: Pushing to GitHub
Now we have a Git repository with our code in it, but it is still only on our local machine. In order to deploy our website to the internet, we need to push our code to a remote repository. This is where GitHub comes in. GitHub is a website that allows you to host your Git repositories online so that you can access them from anywhere and collaborate with others on the same codebase.
If you don’t already have a GitHub account, you can sign up for one at github.com for free. Don’t worry, you don’t need any paid account or plans here, a free account will do more than fine!
So make sure you have an account, log in to GitHub, and then find your way to your main profile page. Now click on the + icon in the top right corner and select New repository from the dropdown menu like so:
Now give your project a name and for everything else you can just keep the default values:
Note that you do have the option to either make this Public where anyone can see it, which is nice if you want to share your code or use it for your portfolio, or Private where only you can see it, and you can protect your source code. Choose whichever you want here.
Now press the Create repository button and you will be taken to a new screen that has instructions. Scroll down until you find the following section:
Make sure you press the copy button to grab these instructions or just leave this tab open for now as you will need to run these commands inside the terminal window in a moment. (You can also copy them into a text file or something).
If this is the first time you’re pushing stuff to GitHub, the terminal window will ask you for a username and password. The username you have, but for the password you will have to generate a personal access token on GitHub.
On the GitHub website, find your profile picture icon in the top right of the page and click on it. In the menu that pops out, find and click on the ⚙️ Settings option:
Then scroll down until you find a button called <> Developer settings on the left here, and click on that:
Now click on the menu item that says 🔑 Personal access tokens and a little submenu will pop out. Select and click on Tokens (classic) to go to the correct page:
Now find the Generate new token button on the right, click on it, and select Generate new token (classic) from the dropdown menu:
It will ask you for your password to make sure it is you, so enter your password and then Confirm. Now on the next page make sure you give the token a name, pick the expiration date you want, and for the scope, make sure you check the repo box:
For safety, it’s best not to set an expiration date of No expiration on your key, but you are free to choose whatever you want here. You don’t have to worry about the other scope settings as long as repo is checked. Now scroll down to the bottom and press Generate token and you will be taken to a page with your new token:
Make sure you copy this token and save it somewhere safe, as you will not be able to see it again. If you lose it, you will have to generate a new one. Put it in a password manager or something like that.
Now go back to your terminal window and execute the commands that you copied from the GitHub page earlier.
git remote add origin https://github.com/DirkMeer/next-js-project.git git branch -M main git push -u origin main
The first command links the local repository to the remote repository on GitHub. The second command renames the default branch from master to main (though yours might already be called main, master is considered outdated nowadays as the word may carry negative connotations). The third command pushes the code to the remote repository on GitHub.
When you run the third command, it will ask you for your username and password if you have never set this up before. The username is simply your GitHub username, and the password is the personal access token you generated earlier.
Your code is now on GitHub! You can typically find your repository at https://github.com/your-username/your-repo-name. You can also click on your user icon in the top right corner of the GitHub page and select Your repositories from the dropdown menu to see all your repositories.
You will see something roughly like this:
Though yours will be a bit different as this particular screenshot is of my ‘messy’ private repository which contains all kinds of extra stuff I’m working on like the tutorials that you have been reading or watching. 🤓
Step 4: Deploying to Vercel
Now that we have our code on GitHub, we can deploy it to the internet using a service called Vercel. Vercel is a platform that allows you to deploy your websites and applications with ease. It is designed to work seamlessly with Next.js, so it is a great choice for deploying our Next.js website.
There are also many other options like AWS, Heroku, and so on. We’ll use Vercel here as it integrates very well with Next.js applications but also because it has a free plan tier which is really sweet as we can all get started with minimum fuss:
So head over to vercel.com and sign up for a free account. Just choose the Hobby plan type and pick a name. In the next step you can choose to Continue with GitHub instead of creating your account using an email address. Make sure you choose this option as you will need to link GitHub to Vercel in order to deploy your website anyway, so we might as well do it now.
You will get a popup box where you authorize Vercel to access your GitHub account:
Now your account will be created and you’ll end up on a page something like this:
We want to import and deploy our Git repository from GitHub, so click the Install button you see there in the middle of the box. Make sure you select the correct space to install it, which will be your GitHub account username:
After you click your username you will be taken to a screen where you can select for which repositories you want to install this app. Use the Select repositories button to find your next-js-project repository in the list and click on it. Your settings will look something like this:
Now press the Install button and you will be taken back to the Vercel dashboard. You will see your repository listed there now:
Go ahead and click on the Import button to import your repository into Vercel. You will be taken to a new screen where you can configure your deployment settings. On this page we have several settings, so let’s go through them one by one. We start with the Configure Project section:
You can give your project a name. Vercel should automatically detect that this is a Next.js project, but if not you can select that as the Framework Preset. The Root Directory should be the ./ folder or the root folder of your repository (unless you deliberately put your project in a sub-folder of your Git repository).
Now if you click on the Build and Output Settings section, you can see the commands that Vercel is going to run to install your project:
These are the same commands that we ran earlier to build our project locally. Vercel will run npm run build to build your project (which is why we tested this locally first!), and use npm install which is going to install all the needed libraries and dependencies. This is why the node_modules folder was excluded by our .gitignore file earlier. You don’t have to change any settings here just leave everything at the default values.
The next box is the Environment Variables box. Here you can add any environment variables that your project needs. We need to store our API key for OpenAI here, otherwise our project will not work:
So take your API key from the .env.local file and paste it into the Name and Value fields. Make sure you use the same name you used in your .env.local file as your code is set up to read this specific key name. Don’t worry, Vercel will store these keys securely and they will not be exposed to the public.
If you followed the instructions in the earlier part of the tutorial this will also be a project-specific key with a maximum monthly budget limit set for it, so you can be sure you’re not going to suddenly get a huge bill from OpenAI. 🧾
You can go to https://platform.openai.com/ and log in to change your settings for the API key if you feel you need to make some changes first. When you are ready, go back to Vercel, make sure your Key and Value are inserted correctly, and press the Add button to save it. You can add multiple keys here if you need to, but in our case, we only need the one.
Now press the Deploy button and let’s see what happens! 🚀
This will bring us down to the Deployments section of the page where you can check the progress:
You will see the same warning about the <img> tag that we saw earlier when we built the project locally, you can just ignore this. If you see any errors during the build process, don’t panic! Just read the error message and try to understand what went wrong. You can always ask Google what the error message means and you’ll figure it out eventually. 🕵️♂️
As our project is relatively simple though, there is a good chance your build will finish without any trouble just like mine did:
Awesome! Now click the Continue to Dashboard button and you will be taken back to the Vercel dashboard. You will see your project listed there and there will be a URL under the name Domains that links straight to your deployed website:
You’ll notice the URL is a bit weird, something like https://next-js-project-eta-smoky.vercel.app/ (* this link will not work as I’ll take this offline and redeploy it again during the video recordings). But as all of this is free that is really quite awesome already! So go ahead and click it and you will see your website, not on your local machine, but available to the whole world! 🌍
Important note > If your images are not showing, the function is likely timing out due to a new default timing restriction on Vercel functions (the image takes slightly too long to return from the API so Vercel times out the call). If this is happening to you, make sure you check out the video version of this tutorial where I show you how to fix this issue in a live debugging session so you can finally have baby sharks appear on your page! 🦈 If you have no problems, feel free to just carry on with the tutorial below.
Congratulations! We have come so far and now you have your own website on the internet! 🎉 There is one last very important thing I want to leave you with before we go.
You may encounter bugs. For instance, I noticed in rare cases that the image will never appear. This is perhaps due to a copyright filter being triggered as we are asking literally for ‘Neo from the Matrix’ and in some cases, the OpenAI API may not return an image and just return something like ‘Not allowed’ or whatever.
You can probably fix this by changing the prompt to something like: “An image in the style of Neo from the Matrix” or something like that. 🤖 This is far less likely to trigger the copyright restraint filter of an image generator. Also, you may want to change the text on the homepage to something different than “Hello Finxtery FinxyWorld”.
You may want to change the theme and improve on it even further, I’m sure you can come up with something better than we have done so far! 🎨 You may even want to use this as a platform for more learning and integrate more personal projects in here, turning it into a portfolio and the beginning of a whole new journey.
Step 5: Deploying updates
As I would like this tutorial here to not be the end but rather the beginning of this journey, the last thing we’ll look at is how to deploy updates, so you can keep changing whatever you want and turn this project into anything you like! 🚀
So let’s look at how to change the text on the “Home” page as an example, and you can then use this same process to fix our image prompt or change anything else you want.
The first step is to change the code locally on our computer. Open the project in your code editor and find the page.tsx file in the app folder:
📁 app
📁 api
📁 blockbuster
📄 route.tsx
📁 blockbuster_v2
📄 route.tsx
📁 get_image
📄 route.tsx
📁 blockbuster_chat
📄 page.tsx
📁 blockbuster_chat_2
📄 page.tsx
📁 blockbuster_chat_3
📄 page.tsx
📁 counter
📄 page.tsx
📁 types
📄 chatMessage.ts
📄 favicon.ico
📄 globals.css
📄 layout.tsx
📄 navbar.tsx
📄 page.tsx 🛠️ We'll be working on this file
So change the text in this page.tsx file in any way you want. I’ll make a simple change for demonstration purposes:
export default function Home() {
return (
<>
<h1>Hello World</h1>
<p>Welcome to my portfolio website!</p>
</>
);
}
Now save the file and close it. If you press the source control icon on the left-hand side of VS Code, you will see the changes you made in the Changes section:
This means your changes have been saved but you still have to commit them to the Git repository. You can either enter a message in the box (something like “Changed text on homepage”) and click the blue Commit button to make a new commit or alternatively, you can do the exact same thing in the terminal if you prefer by running the following commands:
git add . git commit -m "Changed text on homepage"
Now the change is committed to our local Git repository. The last step is to push this change to GitHub. You can either press the big blue button Sync Changes, which will upload the latest changes to GitHub:
Or if you prefer to use the terminal window instead, you can run the following command:
git push
Either version will do the exact same thing, and your GitHub account will now have the latest changes you made to your source code. The really awesome and amazing thing is the following. As we linked Vercel to our GitHub repository, Vercel is automatically watching for changes. So find your Vercel dashboard for the project and you will see it has already realized you updated something:
You can even see the name of the commit you made “Changed text on homepage”. In my case the status is already set to Ready, so let’s open our website’s Homepage:
And there you have it! Your website is now updated with the new text you added! This is where our journey for this tutorial ends, and your journey on this website begins!
Of course, there is tons of other stuff that we didn’t have time to cover here, like making user accounts, implementing authentication, adding a database, making the website responsive, and even adding stuff like payment providers if we want to sell our AI product as a service, and so on.
There was simply not enough space to cover all of that in this tutorial, but if you are interested in more, let us know by emailing Chris that you’d be interested in a follow-up! 🚀
As always, it was my pleasure and my honor to take this journey together, and until the next time, Happy Coding! 👨🏻💻👩🏻💻