Nuxt js dynamic routing is invalid after Generate

Question

In my project I use nuxt js. I have a route that looks like Service/:slug After building and generating, all my routes run perfectly. I use the following code to generate dynamic routes on build

  generate: {

    routes(callback) {
      axios
        .get('url')
        .then(res => {
          const routes = res.data.data.map(service => {
            return '/services/' + service.slug
          })
          callback(null, routes)
        })
        .catch(callback)
      axios
        .get('https://url')
        .then(res => {
          const routes = res.data.data.map(offer => {
            return '/campaigns/' + offer.slug
          })
          callback(null, routes)
        })
        .catch(callback)
    }
  }

But the problem occurs when I create another new project from the admin panel after building and generating.

When I run nuxt build I seem to have three routes

1. Service/Cash
2. Service/Profit

Now, after hosting my dist folder in the server, I click on www.url/service/cash and it works perfectly.

Now I create a new service project named send-money in the admin panel Then when I open the browser using www.url/service/send-money It doesn't work and gets 404.

Now I don't understand how to solve this situation.

Answer 1

When using SSG nuxt only generates pages available in the project. This is how SSG works. Therefore, you need to create a custom script in your server to run the ‍yarn build && yarngenerate command after creating a new page.

For example, let's say you are creating a blog. When you use ‍‍‍yarngenerate, nuxt generates the posts that are fetched from the database at that specific time and moves them into the dist folder. So you need to attach a custom script - which you need to create on the backend somehow - to run yarn build && yarngenerate after a new post is created.