Your Next.js App, Your Environment: A Guide to Deployment

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:

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:

<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.

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:

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:

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:

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:

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:

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:

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:

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:

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

Add the following configuration to the file:

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:

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

Test the Nginx configuration and restart Nginx:

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! 🚀