LinuxTutorialsUbuntu

How To Install Next.js on Ubuntu 20.04 LTS

Install Next.js on Ubuntu 20.04

In this tutorial, we will show you how to install Next.js on Ubuntu 20.04 LTS. For those of you who didn’t know, Next.js is a Javascript framework built on React.js, which allows developers to build static and dynamic websites and web applications.

This article assumes you have at least basic knowledge of Linux, know how to use the shell, and most importantly, you host your site on your own VPS. The installation is quite simple and assumes you are running in the root account, if not you may need to add ‘sudo‘ to the commands to get root privileges. I will show you the step-by-step installation of the Next.js open-source Javascript framework on Ubuntu 20.04 (Focal Fossa). You can follow the same instructions for Ubuntu 18.04, 16.04, and any other Debian-based distribution like Linux Mint.

Prerequisites

  • A server running one of the following operating systems: Ubuntu 20.04, 18.04, 16.04, and any other Debian-based distribution like Linux Mint.
  • It’s recommended that you use a fresh OS install to prevent any potential issues.
  • A non-root sudo user or access to the root user. We recommend acting as a non-root sudo user, however, as you can harm your system if you’re not careful when acting as the root.

Install Next.js on Ubuntu 20.04 LTS Focal Fossa

Step 1. First, make sure that all your system packages are up-to-date by running the following apt commands in the terminal.

sudo apt update
sudo apt upgrade
sudo apt install build-essential

Step 2. Installing Node.js.

Now add Node.js repository to your system:

curl -sL https://deb.nodesource.com/setup_14.x | bash -
sudo apt install nodejs

Now check your Node.js version by running the command on your terminal:

nodejs -v

And check the NPM version too:

npm -v

Step 3. Installing Next.js on Ubuntu 20.04.

Now we create an empty folder anywhere, for example in your home folder, and go into it:

mkdir nextjs
cd nextjs

And create your first Next project:

mkdir firstproject
cd firstproject

Then, initialize the Next.js project development environment with the npx CLI build tool:

npm init -y
npm install next react react-dom

The file structure of the project should resemble the following (excluding node_modules and package-lock.json):

path/to/firstproject/
├── package.json
├── pages
├── public
├── README.md
└── styles

Now using the terminal, run npm run dev to start the Next development server:

npm run dev

Output:

ready - started server on http://localhost:3000

Step 3. Accessing Next.js Project.

Once complete successful installation, navigate to your server IP on port 3000 in a web browser:

http://127.0.0.1:3000/

Install Next.js on Ubuntu 20.04 LTS Focal Fossa

Congratulations! You have successfully installed Next.js. Thanks for using this tutorial for installing the Next.js open-source Javascript framework on Ubuntu 20.04 LTS Focal Fossa system. For additional help or useful information, we recommend you check the official Next.js website.

VPS Manage Service Offer
If you don’t have time to do all of this stuff, or if this is not your area of expertise, we offer a service to do “VPS Manage Service Offer”, starting from $10 (Paypal payment). Please contact us to get the best deal!

r00t

r00t is a seasoned Linux system administrator with a wealth of experience in the field. Known for his contributions to idroot.us, r00t has authored numerous tutorials and guides, helping users navigate the complexities of Linux systems. His expertise spans across various Linux distributions, including Ubuntu, CentOS, and Debian. r00t's work is characterized by his ability to simplify complex concepts, making Linux more accessible to users of all skill levels. His dedication to the Linux community and his commitment to sharing knowledge makes him a respected figure in the field.
Back to top button