Gautham Dev Diaries
Building and Deploying Your First Next.js App: A Step-by-Step Guide for Beginners

Building and Deploying Your First Next.js App: A Step-by-Step Guide for Beginners

Gautham R Vanjre's photo
Gautham R Vanjre
·

6 min read

Table of contents

Introduction

Welcome to the exciting world of Next.js! If you're a beginner looking to dive into web development, you've come to the right place. In this step-by-step guide, we'll walk through the process of building and deploying your very first Next.js app. Don't worry if you're new to the game – we've got you covered.

Prerequisites

  1. React.js - If you want to start learning Next.js, it will be really handy if you know React.js, even better if you have built a couple of Projects using React.js

  2. Typescript (optional) - Next.js and Typescript get along really well, seems like they were made for each other. It is great if you know Typescript since most of the Next.js applications codebases have Typescript in them, but if you want to continue with Javascript, no problem.

  3. Tailwind CSS (optional) - Tailwind CSS is a modern CSS styling library, used in most of the modern websites and is also a go-to CSS styling library for many developers across the globe

  4. Node.js - Before we start coding, let's ensure your development environment is ready. Make sure you have Node.js installed, as Next.js relies on it. You can download the latest version from the official Node.js website.

Creating Our First Next.js App

npx create-next-app@latest

Copy the above command and paste in your terminal to start creating your next.js application

Next, it is going to prompt you to enter your project name. In my case, I have entered "first-next-app" as my project name. After entering the name, click enter

Next set of prompts, is about asking the configuration of your application. Lets start with the first one:

  1. Would you like to use Typscript - I have chosen Yes, because it is beneficial in the long term to use it. Although, you can go ahead with no, if you do not wish to use Typscript.

  2. Would you like to use ESLint - I have chosen No, you can ahead to choose to Yes, if you want to use Linting in your application

  3. Would you like to use Tailwind CSS - I love Tailwind CSS, so I have chosen Yes.

  4. Would you like to use 'src/' directory - I have chosen No, but you free to use src folder if you want to.

  5. Would you like to use App Router - I have chosen Yes since Next.js themselves recommend us to use App Router. But if you do not wish to use App Router then you can go ahead to choose No.

  6. Would you like to customize the default import alias - I have chosen No, because I do no want to mess up with next.js configuration files. And it is recommended to choose No, until you have an idea of what you are getting into.

After these prompts, it will start creating the Next.js application for you.

# navigate to your application folder
cd first-next-app

# to open in VSCode(in my case) enter:
code .

#if you are using any other text editor,
you can directly open the folder in your text editor

File and Folder structure in a Next.js application

  1. App Folder - This is the main folder where you will write all your application files code.

  2. node-modules - It will contain all the application dependencies modules. Without this file, your application will not run.

  3. public - This folder will contain files which are constants such as images.

  4. .gitignore - If you know version control tools such as Git, you know what this does, if you want to ignore any files that is do not want it to go to GitHub then you need to put that file in .gitignore

  5. next-env.d.ts - It is a configuration file give by Vercel to us. It basically configures our typscript to allow us to use assets in public folder.

  6. next-config.mjs - It is a configuration file which helps in bundling the application during build time.

  7. package-lock.json and package.json - If you know about React, then you might have idea of what these files do. These files have the dependencies of the application within them.

  8. postcss.config.js and tailwind.config.ts - These files are the configuration files for Tailwind CSS inside our application.

  9. Readme.md - This file is a readme file which illustrates the details of the project and it is highly editable.

Pushing our application to GitHub

GitHub, a leading platform for version control and collaborative software development, facilitates seamless collaboration among developers globally. Hosting millions of repositories, it empowers teams to track changes, manage projects, and contribute collectively. With features like pull requests and issue tracking, GitHub is pivotal in modern software development workflows.

Now, lets push this next-first-app to GitHub. To do this, first, we need to go to GitHub and create a new Repository. So to GitHub, make sure to log in to your account first, if you don't have an account on GitHub make sure to create one by signing up. Once you log in, click on the new button (which is green in color) it will help you create a repository by redirecting you to a screen which looks like this:

In the repository name, enter your desired name, this will create a new Repository for you. Now, to push your Next app code onto this repository, you need to run some commands. These commands you need to enter in your project's VSCode's terminal.

git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/{username}/{repository_name}.git
git push -u origin main

These commands will push our Next app onto GitHub. Great! one more step towards success. Now let's move on to deploying this GitHub repository onto Vercel platform.

Deploying Next.js app on Vercel

Vercel simplifies the deployment process with its intuitive platform. If you don't have a Vercel account, sign up and connect your repository. Once connected, deploying your React Vite app is a breeze.

Let's start with the deployment process, after logging into Vercel, click on the new button (which is black in colour) and it will give a dropdown menu to select an appropriate option from that. In our case, it is going to be new -> project. After clicking on this, it will redirect you to a new page where you will be prompted to select the appropriate GitHub Repository. So, select the GitHub repository which you want to deploy (in our case - "next-app-hashnode") by clicking on the 'Import' button. Refer, the image below

After importing, Vercel redirects you to another screen asking some details about the project. Since, we do not have any configuration to make, you can directly click on "Deploy" button. Vercel will start deploying the app, and within no time, the project will be deployed.

Congratulations, we have come a long way - from creating a Next app to deploying it on Vercel. Give yourselves a pat on the back, go give yourself a small treat and celebrate your win.

Conclusion

This blog, was the introduction to Next.js. I am planning to cover as many topics as I can in Next.js, so stay tuned and don't forget to subscribe to my newsletter. Till then, go through the Next.js documentation by clicking here. They have a beautiful and well structured course to learn about Next.js in depth. I have already written a blog on React vs Next.js highlighting the difference between the data rendering between them that is Client-side rendering and server-side rendering make sure to check that out.

For any query, you can get in touch with me via LinkedIn and twitter. You can go through the code in this GitHub repository Leave all your comments and suggestions in the comment section. Let's connect and share more ideas.

Happy coding!

Next.jsVercelGitHubGitVisual Studio Code