Next.js: How to deploy NextJs project in production server?

[anehkumar]

Hi, I create my project using NextJs and it was ready for production but I am little confuse how we can host that I already run following command

npm run build
npm run start

Now I am not sure which folder we need to upload to server do we need to upload complete project or only .next folder Can you please help me. How to host NextJs application.

Thanks in advance.

[MathiasKandelborg]

This link might prove useful to you.

It's incredibly easy! To start, you'd want nodejs to know that it is running in production. So you run the app in production like this: NODE_ENV=production npm run start.

But there are several enhancements you can make, in order to make your server more production ready. Using compression or a fast proxy (e.g nginx) that does a lot of extra work to make the server even faster and smaller.

[timneutkens]

Please post your question here: https://spectrum.chat/next-js, as per the issue template

[giriibm]

Looks like "next export" creates/export static pages on the "out" folder and I want to deploy it to the nginx that's the right way to deploy it in the production server? or Am I missing anything here?, BTW we are using nodejs/mongodb for api/backend. I'm don't know why we have "next build" and what is the difference between "next export" and "next build".

[scurrilus]

Just add "export" task to your package.json and run "npm run-script prod" or what ever you named it. It generates an "out" folder with all what you need. Just copy the content from the "out" folder to your server.

_package.json_

"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"prod": "next export"
},

[mtaylor567]

Is next export the only way to run a next build in production using nginx?

[rezaHashemi8139]

Hey
Im quiet new to next.js and im trying to deploy my project to a windows webserver. Ive already installed node and iisnode but i really dont know how to get it work.

[sarang-naico]

@rezaHashemi8139
Were you able to deploy the next js app on iis?

[iMerica]

This official page is extremely thin on running Next.js in production.

For example: How to enable access logs? Is a frontend web server (nginx) neccessary? Why/Why not? What are the trade offs? What is the reference architecture for running next.js in Kubernetes?

Can someone point me to any literature on these topics?

[timneutkens]

https://nextjs.org/docs/deployment#self-hosting

It's hosting a Node.js application, nothing special needed really.

[thomasjm]

@timneutkens the self-hosting docs you linked say that to deploy a hybrid pages Node server to production, you should "Potentially copy the .next, node_modules, and package.json to your server."

What does "potentially" mean here? In particular, what determines when node_modules is needed? My node_modules is quite large and copying it to the server seems to defeat the purpose Webpack's tree-shaking, so I'm wondering if there's some way around this.

[timneutkens]

All node_modules your project depends on need to be installed, including next. Tree shaking is applied on client-side bundling, not server-side. Server-side all node_modules are marked as external.

[thomasjm]

Thanks for the quick response! Would the new serverless target be a way to get around this and have a smaller version on the server?

[timneutkens]

Depends on how you’re deploying, with serverless you have to deploy every page as a separate function (not one single server) otherwise it will negate optimizations from the severless target

[message]

Here's how I deployed my Next.JS app, maybe it will help someone.

Here is my bash script that is running in Jenkins to build necessary files

rm -rf $WORKSPACE/my-nextjs-project
git clone [email protected]:me/my-nextjs-project.git $WORKSPACE/my-nextjs-project

cd $WORKSPACE/my-nextjs-project
git checkout master

yarn install
yarn build

mkdir my-nextjs-project

mv public/ my-nextjs-project/

NEXT_BUILD_ID=$(cat build/BUILD_ID)
LAST_COMMIT=$(git rev-parse HEAD)

# That's just for debugging purposes
echo "{git: ${LAST_COMMIT}, ci: ${BUILD_ID}, next: ${NEXT_BUILD_ID}}" > my-nextjs-project/CI

# trim package.json and leave only things that you need in production
cat package.json | jq '. | {name: .name, private: true, version: .version, scripts: {start: .scripts.start}, dependencies: .dependencies}' > my-nextjs-project/package.json

# I'm using next-compose-plugins, so here we need to dump config. If you have next.config.js as an object then just copy config file 
NEXT_CONFIG=$(node -e 'var configFile = require("./next.config.js"); var config = configFile([], {}); delete config.webpack; console.log(JSON.stringify(config));')
echo "module.exports = ${NEXT_CONFIG}" > my-nextjs-project/next.config.js # result => {distDir: "build", poweredByHeader: false}

mv build my-nextjs-project/

cd my-nextjs-project

yarn install 

cd $WORKSPACE/my-nextjs-project

# dump folder tree structure just for Jenkins console output logs
tree -h -L 1 build/

tar czf $WORKSPACE/my-nextjs-project.tar.gz my-nextjs-project
cd $WORKSPACE

rm -rf $WORKSPACE/my-nextjs-project

Upload result to your server (with scp for example, add your ssh key to .ssh/authorized_keys on server side to bypass password verification), unpack it (e.g./var/www/my-nextjs-project) and run it. You can install your node application as systemd service.

Here is my /etc/systemd/system/nextjs.service

[Unit]
Description=My Next.JS app

[Service]
ExecStart=node ./node_modules/.bin/next start -p 6200
Restart=always
User=www-data
Group=www-data
Environment=PATH=/usr/bin:/usr/local/bin
Environment=NODE_ENV=production
WorkingDirectory=/var/www/my-nextjs-project
StandardOutput=append:/var/log/www/my-nextjs-project/common.log
StandardError=inherit

[Install]
WantedBy=multi-user.target

Since it's a service now, you can sudo systemctl start/stop/restart nextjs

I use Java as API for my project, so I make nginx to serve nextjs public files and route api requests to Java. Next.js is running on port 6200 and Java on 62000.

server {
    listen 80;
    server_name my-nextjs-project.com www.my-nextjs-project.com;

    access_log /var/log/nginx/my-nextjs-project/access.log;
    error_log /var/log/nginx/my-nextjs-project/error.log;

    root /var/www/my-nextjs-project/public;

    location / {
        try_files $uri @jsproxy;
    }

    location @jsproxy {
        proxy_pass              http://localhost:6200;
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        Host 127.0.0.1;
    }

    location ~ ^/api/v1/ {
        proxy_pass              http://localhost:62000; # Pass API calls to Java api
        proxy_set_header        X-Real-IP $remote_addr;
        proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header        Host 127.0.0.1;
    }
}

Much love ❤️