I have a Nuxt project that is fully statically generated. But one part of this is pretty dynamic. Let's say it is items page and items/:id pages. Where on the items page we render the list of items as links to each items/:id page.

I would like to opt-out of a static generation for those 2 pages. For now, I used the following changes to the nuxt.config.js:

export default {
  target: 'static',
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'items',
        path: '/items/*',
        component: resolve(__dirname, 'pages/items/_slug.vue')
      })
    }
  },
  generate: { exclude: [/^\/items/], fallback: '404.html' }

This works nicely when I do nuxt generate & nuxt start but only for navigation within the website. When I go directly to let's say /items/42 I get 404 rendered.

How should I adjust configuration or deployment to make it work?