Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Your Next.js App, Your Environment: A Guide to Deployment
Digital Pollution profile imageLeandro Nuñez
Leandro Nuñez forDigital Pollution

Posted on • Edited on

     

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
Enter fullscreen modeExit fullscreen mode

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.comDocumentRoot /var/www/yourdomain.com/public<Directory /var/www/yourdomain.com/public>OptionsFollowSymLinksAllowOverrideAllRequireall granted</Directory>ErrorLog ${APACHE_LOG_DIR}/error.logCustomLog ${APACHE_LOG_DIR}/access.log combined</VirtualHost>
Enter fullscreen modeExit fullscreen mode

Replaceyourdomain.com with your actual domain name and adjust theDocumentRoot path accordingly.

Step 4: Deploy Your Next.js App

Copy the contents of the Next.jsout directory (created during the build step) to thepublic directory specified in the virtual host configuration.

cp-R .next/* /var/www/yourdomain.com/public
Enter fullscreen modeExit fullscreen mode

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:

sudoservice apache2 restart
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

Step 3: Set Up PM2 (Process Manager)

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

npminstallpm2-g
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

Step 3: Set Up PM2 (Process Manager)

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

npminstallpm2-g
Enter fullscreen modeExit fullscreen mode

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
Enter fullscreen modeExit fullscreen mode

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:

sudoaptinstallnginxsudonano /etc/nginx/sites-available/yourdomain.com
Enter fullscreen modeExit fullscreen mode

Add the following configuration to the file:

server{listen80;server_nameyourdomain.com;location/{proxy_passhttp://localhost:3000;# Replace 3000 with your Next.js app's portproxy_set_headerHost$host;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$proxy_add_x_forwarded_for;proxy_set_headerX-Forwarded-Proto$scheme;}}
Enter fullscreen modeExit fullscreen mode

Create a symbolic link to enable the new configuration:

sudo ln-s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
Enter fullscreen modeExit fullscreen mode

Test the Nginx configuration and restart Nginx:

sudonginx-tsudoservice nginx restart
Enter fullscreen modeExit fullscreen mode

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

Top comments(5)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
viktorpanasiuk97 profile image
viktor-panasiuk-97
  • Joined
• Edited on• Edited

Thank you for the article. Recently I have been working on my home project and I faced several issues when I tried to publish the SSG next.js app on the server. I had some difficulties with redirects and trailing slash. If someone is interested in this topic you can follow this instruction -SSG NextJS publishing on the Apache server

CollapseExpand
 
vexit profile image
Vex Vendetta
I am a creative dreamer
  • Location
    Brisbane, Australia
  • Education
    Bachelor of Information Technology, University of Queensland, Brisbane , Australia
  • Pronouns
    Supreme Sovereign Overlord
  • Work
    Supreme Sovereign Overlord of VEXIT
  • Joined

I like it. Short and to the point

CollapseExpand
 
leandro_nnz profile image
Leandro Nuñez
Argentinian software engineer.Deciding whether to join or defeat the empire.
  • Location
    Buenos Aires, Argentina
  • Education
    Universidad Tecnológica Nacional
  • Work
    Freelancer for Digital Pollution
  • Joined

Thank you!

CollapseExpand
 
mo_mo_9af8b3d0881f9598393 profile image
mo mo
  • Joined

How to display on the main domain without a port?

CollapseExpand
 
leandro_nnz profile image
Leandro Nuñez
Argentinian software engineer.Deciding whether to join or defeat the empire.
  • Location
    Buenos Aires, Argentina
  • Education
    Universidad Tecnológica Nacional
  • Work
    Freelancer for Digital Pollution
  • Joined

Sorry, I don't understand. It's port 80 I'm using. Please, tell me if I'm missing something or mistaken in some subject! Thank you!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Custom software development.

More fromDigital Pollution

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp