Creative Designs Guru

Deploy Your Next JS Application in Subfolder

December 23, 2020

You sometimes want to deploy your Next JS under /blog, /docs, or /dashboard folder. But by default, you can only deploy your Next JS on your project root folder.

Since Next JS 9.5, you can change this configuration by setting basePath in your next.config.js. By default, basePath is set to / but you can modify to /blog or /docs:

module.exports = {
basePath: '/docs',
};

That also means you can also run several Next JS applications under the same domain. You don't need to create a subdomain anymore.

After updating basePath, you won't be able to visit http://localhost:3000 on your local development environment. To continue to browse on your local machine, you need to add basePath value after http://localhost:3000.

For your information, you don't need to update your links in your Next JS code. Indeed, it'll automatically prepend basePath value to all your links.

Join my Newsletter for JS Devs
Get helpful content about Full-Stack React development with Next JS and Tailwind CSS. No spam, unsubscribe at any time.

Next JS Templates and Themes

Browse our Next JS templates and themes that you can use for your Next JS project. Built on top of React in modular way, the templates use modern code pattern like component and UI blocks styled with Tailwind CSS. You can also check my portfolio:

Easy to configure and customize, you can modify the themes based on your needs. Saving you development and design time.

NextJS templates themes