We’re going to learn about deploying a full stack web app using Next.js and Vercel in this workshop. We’ll learn about setting up a Next.js project, committing it to Github, linking it to Vercel and getting our first production deployment URL. We’ll then see how we can connect it to a domain, and finally, how we can iterate on our project and see our changes reflected immediately on our deployed website.
The goal of this workshop isn’t to cover every framework or explain how every piece of the puzzle fits together. This is not a React, Git, DevOps or API workshop. Many of the technologies we’ll touch on might be new to you, and I've deliberately kept explanations brief to avoid overwhelming you with information.
Instead, my aim is to equip you with the essential tools and processes to deploy something out in the world. Once you have these basics down, you can dive deeper into specific components as needed to solve problems which you uniquely might face or develop the features which you want to build. The best way to learn web development is by doing, and I hope this workshop gives you a strong foundation to start building something awesome.
This workshop assumes that you have a basic understanding of HTML, CSS and Javascript. If you don’t know about the foundational web patterns, that’s okay! You can still follow along but I would recommend checking out freecodecamp.org for some resources on learning the basics.
I’m also assuming you have Git installed and have a GitHub account. If you don’t, no worries! Have a read through this link. You can stop after reach “How to Initialize a Git Repository” ****as we’ll cover it in this workshop.
How to Host Your Project on GitHub – Explained With Examples
Before we can start developing our application, we need to install some essential tools to work with Node.js. To get Node.js installed, visit the official website below. However, I recommend using a package manager for installation, as it simplifies the process of upgrading and switching between Node.js versions directly from the command line.
If you already have Node.js installed, please make sure you are using Node 20. To check, you can run node --version .
<aside> 💡 Node.js is a runtime environment that allows you to run JavaScript code outside of a web browser, typically on a server. Unlike basic HTML/CSS/JavaScript, which is used to create and style web pages, Node.js is used to build scalable and efficient backend services like APIs or handle server-side operations. It uses an event-driven, non-blocking I/O model, which makes it ideal for building real-time applications that need to handle a lot of simultaneous connections, like chat apps or live updates.
</aside>
Node.js ships with a package manager called npm. npm (Node Package Manager) is a tool that helps developers manage and use libraries of code, called packages, in their projects. Instead of writing everything from scratch, npm allows you to easily install, update, and keep track of the different packages your project needs. It ensures that all the code you use works well together, making development faster and more efficient.
Frontend frameworks are tools that help JavaScript developers build user interfaces more efficiently. They provide pre-built structures and components that handle common tasks, like rendering HTML, managing user input, and updating the display when data changes. Popular frameworks like React, Vue, and Angular simplify the process of creating dynamic, responsive web applications by offering reusable code and a clear structure for your projects. As a new developer, learning a frontend framework can save you time and help you build more complex applications with less effort.
For this workshop, we will be using a framework called Next.js, which is based on React.