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
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.
When using
SSG
nuxt only generates pages available in the project. This is howSSG
works. Therefore, you need to create a customscript
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 thedist
folder. So you need to attach a custom script - which you need to create on the backend somehow - to runyarn build && yarngenerate
after a new post is created.