How to Run the Next.js website from inside the subdirectory path

As we all know, Nex+t.js is being used extensively nowadays for various purposes, with integrations across many languages and frameworks. While I was engaged in similar work, I encountered the task of serving the site at a subdirectory of an existing site. Initially, I didn't consider it a serious challenge until I delved into it and realized that there was little to no information available online regarding how to accomplish it, or even if it was possible at all. This prompted me to take a closer look and tackle the issue head-on.

Let's start with the setup of NextJs

1. First setup the project with npx create-next-app@latest
2. cd into the project what you named it.
3. Create a .env file in the project dir.
4. Add this variables into the .env  ↴
   NEXT_PUBLIC_SITE_URL_PROD="https://www.example.com/nextjs"

This make the basic setup of Nextjs with env, now check if project working with “npm run dev” cmd in terminal. If it is, let's move to the next step else check the next document and do setup again.

Now our main file to edit for this task is next.config.ts if setup with typescript or next.config.mjs open that file it should look like this.

// @ts-check /** @type {import('next').NextConfig} */

const nextConfig = {  /* config options here */}

module.exports = nextConfig

We need to do changes in this for our project to work in subdirectory of existing site 

const isProd = process.env.NODE_ENV === 'production' - - > this check if we are in production mode/** 

@type {import('next').NextConfig}

*/ const nextConfig = {assetPrefix: isProd ? process.env.NEXT_PUBLIC_SITE_URL_PROD : undefined,    trailingSlash: true,  }

module.exports = nextConfig

assetPrefix

This option give a prefix to the assets we used in NextJs and next use it assets with /next/ so this will add prefix of “www.example.com/nextjs/_next” so our site get it asset properly

Trailing slash

This works as it ends the link with / for example with the about page normally it’s /about but this makes it /about/ it work better with nginx 

Now where you want to deploy this site you need two thing for this to work first nginx, Second Nodejs as our app need node js environment to run it self for node it's easy you just need to install node 20 or later version for instructions it's easy to find them on internet.

For nginx download and install instructions will be provided here:

“ https://docs.nginx.com/nginx/admin-guide/installing-nginx/installing-nginx-open-source/”

How to setup NextJs Website from subdirectory path

Create the Configuration File

First, create your abc.conf file with the desired configuration for the “/nextjs” location. You can place this file in your Nginx configuration directory, typically located at /etc/nginx/conf.d/.

# /etc/nginx/conf.d/abc.conf

location /nextjs {   

 proxy_pass http://localhost:3000;

 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;

}

Include abc.conf in Nginx Configuration

Open your main Nginx configuration file, often named nginx.conf, located in the /etc/nginx/ directory.

Look for the http block within nginx.conf. If you can't find it, you can add it if it's not present.

Inside the http block, add the following line to include abc.conf:

“ include /etc/nginx/conf.d/abc.conf ”

Verify Configuration and Restart Nginx

Before restarting Nginx, verify the configuration for any syntax errors using:

“sudo nginx -t”

If the syntax is okay, proceed to restart Nginx to apply the changes:

“sudo systemctl restart nginx”

After all of this config make sure to run a build of next with “npm run build” and after the build run “npm run start”

Now you can check your site running at www.example.com/nextjs 👍

Let’s Wrap It Up!

To run the Next.js website from inside the subdirectory path within an existing site posed an unexpected challenge. Despite the lack of readily available information, diving into the problem head-on proved to be a valuable learning experience.

LN Webworks can help you with the process. We are known for our incredible Drupal development services across the world. As a trusted Drupal company, our primary focus is the utmost satisfaction of our clients. So, reach out to us today and experience the magic we create.