How to Install Next.js on Ubuntu 22.04

Next.js is a free, open-source, and production-grade React application that gives you building blocks to create superfast and extremely user-friendly web applications. It is created by Vercel and enables React-based web applications with server-side rendering and generating static websites. Next.js can handle all configurations needed for React and provides additional features and optimizations for your application.

This tutorial will show you how to install Next.js with Nginx as a reverse proxy on Ubuntu 22.04.

Prerequisites

• A server running Ubuntu 22.04.
• A Valid domain name is pointed to your server IP.
• A root password is configured on the server.

Install Node.js

Before starting, Node.js must be installed on your server. First, install all the required dependencies using the following command:

apt install curl gnupg2 wget -y

Next, add the Node.js repository with the following command:

curl -sL https://deb.nodesource.com/setup_18.x | bash -

Once the repository is added, you can install the Node.js using the following command:

apt install nodejs -y

After the installation, verify the Node.js version using the following command:

node -v

You should see the following output:

v18.12.1

You can also verify the NPM version using the following command:

npm -v

You should see the following output:

8.19.2

Create a Next.js Application

You can use the npx tool to create a Next.js application. npx is a CLI tool that makes it easy to install and manage dependencies hosted in the npm registry.

Run the following command to create a Next.js application named nextapp:

npx create-next-app nextapp

You should get the following output:

Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
? Would you like to use TypeScript with this project? … No / Yes
? Would you like to use ESLint with this project? … No / Yes
Creating a new Next.js app in /root/nextapp.

Using npm.

Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next

added 237 packages, and audited 238 packages in 20s

78 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Initializing project with template: default 

Success! Created nextapp at /root/nextapp

Once you are finished, you can proceed to the next step.

Run a Next.js Application

After creating a Next.js application, change the directory to the nextapp and run it with the following command:

cd nextapp
npm run dev

You will get the following output:

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 3.2s (154 modules)
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

Press the CTRL+C to stop the application. Then, build the application using the following command:

npm run build

You will get the following output:

> [email protected] build
> next build

info  - Linting and checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (3/3)
info  - Finalizing page optimization  

Route (pages)                              Size     First Load JS
? ? /                                      4.83 kB        83.7 kB
?   ? css/ae0e3e027412e072.css             707 B
?   /_app                                  0 B            78.9 kB
? ? /404                                   212 B          79.1 kB
? λ /api/hello                             0 B            78.9 kB
+ First Load JS shared by all              79.2 kB
  ? chunks/framework-0f397528c01bc177.js   45.7 kB
  ? chunks/main-5cebf592faf0463a.js        31.8 kB
  ? chunks/pages/_app-05f53d08443c56f6.js  402 B
  ? chunks/webpack-2369ea09e775031e.js     1.02 kB
  ? css/ab44ce7add5c3d11.css               247 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
?  (Static)  automatically rendered as static HTML (uses no initial props)

Next, start the Next.js application using the following command:

npm start

You should see the following output:

> [email protected] start
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Press the CTRL+C to stop the application.

Manage Next.js Application with PM2

PM2 is an advanced process manager for production Node.js applications. It allows you to keep applications alive forever.

To install the PM2, run the following command:

npm install pm2@latest -g

Next, start your Next.js application using the PM2 by running the following command:

pm2 start "npm start"

You will get the following output:

[PM2] Starting /usr/bin/bash in fork_mode (1 instance)
[PM2] Done.
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
? id  ? name         ? namespace   ? version ? mode    ? pid      ? uptime ? ?    ? status    ? cpu      ? mem      ? user     ? watching ?
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
? 0   ? npm start    ? default     ? N/A     ? fork    ? 1321     ? 0s     ? 0    ? online    ? 0%       ? 24.5mb   ? root     ? disabled ?
???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

At this point, the Next.js application is started and listens on port 3000. You can check it with the following command:Advertisement

ss -antpl | grep 3000

You will see the following output:

LISTEN 0      511          0.0.0.0:3000      0.0.0.0:*    users:(("node",pid=1337,fd=18))

You can also check the status of your Next.js application with the following command:

pm2 show "npm start"

You will get the following output:

 Describing process with id 0 - name npm start 
???????????????????????????????????????????????????????????
? status            ? online                              ?
? name              ? npm start                           ?
? namespace         ? default                             ?
? version           ? N/A                                 ?
? restarts          ? 0                                   ?
? uptime            ? 59s                                 ?
? script path       ? /usr/bin/bash                       ?
? script args       ? -c npm start                        ?
? error log path    ? /root/.pm2/logs/npm-start-error.log ?
? out log path      ? /root/.pm2/logs/npm-start-out.log   ?
? pid path          ? /root/.pm2/pids/npm-start-0.pid     ?
? interpreter       ? none                                ?
? interpreter args  ? N/A                                 ?
? script id         ? 0                                   ?
? exec cwd          ? /root/nextapp                       ?
? exec mode         ? fork_mode                           ?
? node.js version   ? N/A                                 ?
? node env          ? N/A                                 ?
? watch & reload    ? ?                                   ?
? unstable restarts ? 0                                   ?
? created at        ? 2022-11-12T13:30:39.734Z            ?
???????????????????????????????????????????????????????????
 Divergent env variables from local env 


 Add your own code metrics: http://bit.ly/code-metrics
 Use `pm2 logs npm start [--lines 1000]` to display logs
 Use `pm2 env 0` to display environment variables
 Use `pm2 monit` to monitor CPU and Memory usage npm start

Once you are finished, you can proceed to install and configure Nginx.

Configure Nginx as a Reverse Proxy for the Next.js Application

It is a good idea to install and configure Nginx as a reverse proxy to access the Next.js application.

First, install the Nginx package with the following command:

apt install nginx -y

Once the Nginx is installed, create an Nginx virtual host configuration file:

nano /etc/nginx/conf.d/next.conf

Add the following configurations:

server {
  
  server_name next.example.com;

  location / {
    # Reverse proxy for Next server
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;

  }
}

Save and close the file. Then, verify the Nginx for any syntax configuration error:

nginx -t

You should see the following output:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Next, restart the Nginx service to apply the changes:

systemctl restart nginx

You can also check the status of Nginx with the following command:

systemctl status nginx

You should see the following output:

? nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Sat 2022-11-12 13:35:46 UTC; 6s ago
       Docs: man:nginx(8)
    Process: 2023 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 2024 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 2025 (nginx)
      Tasks: 3 (limit: 464122)
     Memory: 3.3M
     CGroup: /system.slice/nginx.service
             ??2025 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
             ??2026 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
             ??2027 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Nov 12 13:35:46 ubuntu22041 systemd[1]: Starting A high performance web server and a reverse proxy server...
Nov 12 13:35:46 ubuntu22041 systemd[1]: Started A high performance web server and a reverse proxy server.

Once you are done, you can proceed to the next step.

Access Next.js Web Application

At this point, the Next.js application is installed and configured with Nginx. You can now access it using the URL http://next.example.com. You should see the Next.js web page on the following screen:

Conclusion

Congratulations! you have successfully installed the Next.js application with Nginx on Ubuntu 22.04. You can now fast your development process using the Next.js framework. Feel free to ask me if you have any questions.