How to Deploy React with Next.js on an NGINX Server

by
Tiempo de lectura: 2 minutos

To deploy the web application we have created with React and Next.js, we will follow these steps:

  • Prepare the application for production: Run npm run build in your Next.js project to build the application. This will generate a build folder containing the optimized production files.
npm run build
  • Configure Nginx: You need to configure Nginx to serve your Next.js application. You can do this by creating a new server block in the Nginx configuration for your domain or subdomain and setting the path to your application’s build folder. Here is an example of how the configuration might look in the Nginx configuration file (nginx.conf or a specific configuration file for your site):
   server {
       listen 80;
       server_name your-domain.com;

       location / {
           root /path/to/your/application/build;
           index index.html;
           try_files $uri $uri/ /index.html;
       }
   }

Make sure to replace your-domain.com with your actual domain and /path/to/your/application/build with the actual path to your Next.js application’s build folder.

  • Restart Nginx: After updating the Nginx configuration, make sure to restart the Nginx service for the changes to take effect. You can do this by running the following command in your terminal:
   sudo systemctl restart nginx
  1. Test the application: Visit your domain in a web browser to ensure that the Next.js application is being served correctly through Nginx. You should see your application running as expected.

It is important to note that Nginx will only serve the static files generated by Next.js. If your Next.js application uses server-side functions (such as getServerSideProps or getInitialProps), you need to ensure that your Nginx configuration does not interfere with these functions and that your application is properly configured to handle these requests.

To make your Next.js application compatible with getServerSideProps or getInitialProps, you need to configure Nginx to proxy requests that require server-side processing to your Next.js application.

  • Configure Nginx to proxy all requests to your Next.js application:
server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:your-nextjs-app-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;
    }
}

Make sure to replace your-domain.com with your actual domain and your-nextjs-app-port with the port on which your Next.js application is running (e.g., 3000 if you are using the Next.js development server).

This Nginx configuration proxies all requests to your Next.js application, allowing getServerSideProps or getInitialProps to execute properly on the server.

  • Restart Nginx:

After updating the Nginx configuration, make sure to restart the Nginx service for the changes to take effect:

sudo systemctl restart nginx

With this configuration, all requests are proxied to your Next.js application, allowing you to use server-side functions such as getServerSideProps or getInitialProps to handle requests and render the page on the server as needed.

Post Views: 8

Leave a Comment