Your Next.js App, Your Environment: A Guide to Deployment
Tags: nextjs, webdev, deploy, react
Published: 2023-07-26 22:14:32

Greetings, fellow developers! 
In this guide, we'll explore the exciting journey of deploying your Next.js application, utilizing the latest version, to your very own environment. 
We'll discuss three popular options: deploying as a static website in Apache, deploying as a Node.js application, and deploying with Nginx as a reverse proxy. 

Let's get started on this deployment adventure!

## Option 1: Static Deployment with Apache


### Step 1: Build Your Next.js App

The first step is to build your Next.js application. 
Open your project directory and run the following command:

```bash
npm run build
```

### Step 2: Configure Apache

Next, ensure you have Apache installed on your server or local environment. If not, install Apache, and make sure it's up and running.

### Step 3: Set Up Virtual Host

Create a virtual host configuration for your Next.js app. 
Edit the Apache configuration file, usually located at `/etc/apache2/sites-available/`, and add the following:

```apache
<VirtualHost *:80>
    ServerName yourdomain.com
    DocumentRoot /var/www/yourdomain.com/public

    <Directory /var/www/yourdomain.com/public>
        Options FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
```

Replace `yourdomain.com` with your actual domain name and adjust the `DocumentRoot` path accordingly.

### Step 4: Deploy Your Next.js App

Copy the contents of the Next.js `out` directory (created during the build step) to the `public` directory specified in the virtual host configuration.

```bash
cp -R .next/* /var/www/yourdomain.com/public
```

Ensure you copy the entire contents of the `.next` directory, including all its subdirectories and files.

### Step 5: Restart Apache

Finally, restart Apache to apply the changes:

```bash
sudo service apache2 restart
```

Your Next.js app should now be accessible via your domain name!

## Option 2: Node.js Deployment


### Step 1: Set Up Node.js Environment

Make sure you have Node.js installed on your server or local environment. If not, download and install Node.js from the official website.

### Step 2: Prepare Your Next.js App

Ensure your Next.js application is production-ready by building it:

```bash
npm run build
```

### Step 3: Set Up PM2 (Process Manager)

Install PM2, a popular Node.js process manager that will ensure your app runs continuously:

```bash
npm install pm2 -g
```

#### Step 4: Start Your Next.js App with PM2

Navigate to your project directory and start your Next.js app with PM2:

```bash
pm2 start npm --name "your-app-name" -- start
```

Replace `"your-app-name"` with a custom name for your app.

Your Next.js app is now deployed and running as a Node.js application!


## Option 3: Node.js Deployment with Nginx


### Step 1: Set Up Node.js Environment

Make sure you have Node.js installed on your server or local environment. If not, download and install Node.js from the official website.

### Step 2: Prepare Your Next.js App

Ensure your Next.js application is production-ready by building it:

```bash
npm run build
```

### Step 3: Set Up PM2 (Process Manager)

Install PM2, a popular Node.js process manager that will ensure your app runs continuously:

```bash
npm install pm2 -g
```

### Step 4: Start Your Next.js App with PM2

Navigate to your project directory and start your Next.js app with PM2:

```bash
pm2 start npm --name "your-app-name" -- start
```

Replace `"your-app-name"` with a custom name for your app.

### Step 5: Set Up Nginx as a Reverse Proxy

Install Nginx and create a new server block configuration file:

```bash
sudo apt install nginx
sudo nano /etc/nginx/sites-available/yourdomain.com
```

Add the following configuration to the file:

```nginx
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000; # Replace 3000 with your Next.js app's port
        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;
    }
}
```

Create a symbolic link to enable the new configuration:

```bash
sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
```

Test the Nginx configuration and restart Nginx:

```bash
sudo nginx -t
sudo service nginx restart
```

Your Next.js app is now deployed and running as a Node.js application with Nginx as a reverse proxy!

### Conclusion

Congratulations on successfully deploying your Next.js app! Whether you chose the static deployment with Apache, the Node.js approach, or the Node.js deployment with Nginx as a reverse proxy, you've unlocked the power to showcase your application to the world. Embrace this knowledge, and let your creativity shine as you build and deploy more incredible web experiences!

If you have any questions or need further assistance, don't hesitate to reach out. 

Happy coding and happy deployment! 🚀