NextJS deploy to a specific URL path

问题

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.

回答1:

You can use custom server to create NextJS application work on your specific URL:

See the example here:

https://github.com/zeit/next.js/tree/canary/examples/custom-server-express

The key point is to add your specific url as an API, then forward user's request to your specific page you want to serve:

const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.get('/my-test-application/path-for-my-app', (req, res) => {
    return app.render(req, res, '/index', req.query)
  })

  server.get('/my-test-application/path-for-my-app/page1', (req, res) => {
    return app.render(req, res, '/page1', req.query)
  })

  server.get('/posts/:id', (req, res) => {
    return app.render(req, res, '/posts', { id: req.params.id })
  })

  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

来源：https://stackoverflow.com/questions/60452054/nextjs-deploy-to-a-specific-url-path

标签

reactjs

next.js