javascript - NextJS deploy to a specific URL path

Question

I am working on my first NextJS application. When I run "npm run dev" or "npm run start" it deploys my application to

http://host:port/

When I navigate to a page the url becomes

http://host:port/page1

I need to have my own specific URL, such as

http://host:port/my-test-application/path-for-my-app/
http://host:port/my-test-application/path-for-my-app/page1

Furthermore, my app has a lot of elements to link to other areas of the applications, i need these to also go to URL with the basePath and not just go to the root path.

I will also be depolying this app to different servers which will have different basePaths, therefore this can not be hardcoded in my app.

How can I do this?

With other applications such as react/vue/angular/native JS, I simply build my application and put the build code in a "my-test-application/path-for-my-app" folder on my server.

I tried this with my NextJS application but i got an error that ".next" folder could not be found.

I googled and could find some references to using "assetPrefix" or using "Zones". However I do not really understand what I am supposed to do.

How do i get my app deployed to specific URL

Solution 1: Restructure "pages" - Does not enable me to deploy to different servers with different basePaths

I could create the folder structure inside my "pages" directory and change all my elements to use this folder structure.

|- pages
     |- my-test-application
           |- path-for-my-app
                |- index.js
                |- page1.js


<Link href="/my-test-application/path-for-my-app/page1" >

I dislike this solution as the basePath is hardcoded into my application, as to apposed to a deployment setting.

If I wanted to deploy my app on 2 servers with different basePaths (i.e. below) I would have to have 2 versions of the code.

http://host:port/my-test-application_1/path-for-my-app/page1
http://host:port/my-test-application_2/diff-path-for-my-app/page1

Updated: I have updated this question on 5th March to include my need for s to work and one solution which I do not like.

Answer 1

In Next.js ≥ 9.5, you can set a basePath in your next.config.js. For example, if you want your entire Next.js app to live at /docs, you can use:

// next.config.js
module.exports = {
  basePath: '/docs'
}

Next will will make sure all assets are served from the right place, and it will automatically prefix this base path for all Links in your app, as well as during programmatic navigation using next/router. For example,

<Link href="/about">
  <a>About Page</a>
</Link>

will be transformed to link to /docs/about, as will

router.push('/about')

This means that you can change basePath without changing anything at all in the actual code of your app.