title: Nextjs assets 404 Not Found when using dynamic rouitng while ssr
body: <p>I had a static folder with an older version of <code>nextjs</code>. I updated my <code>nextjs</code> to use <code>public</code> folder.</p>
  
  <pre><code>"next": "^9.4.0",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  </code></pre>
  
  <p>this is my <code>nextjs</code> config:</p>
  
  <pre><code>const withPlugins = require('next-compose-plugins');
  const withCss = require('@zeit/next-css');
  const withSass = require('@zeit/next-sass');
  const withImages = require('next-images');
  require('dotenv').config();
  const withSourceMaps = require('@zeit/next-source-maps')();
  
  if (typeof require !== 'undefined') {
    // eslint-disable-next-line no-unused-vars
    require.extensions['.css'] = file =&gt; {};
  }
  
  const nextConfig = {
    env: {
      BUILD_ENV: process.env.BUILD_ENV,
    },
    webpack: (config, { isServer }) =&gt; {
      if (!isServer) {
        // eslint-disable-next-line no-param-reassign
        config.resolve.alias['@sentry/node'] = '@sentry/browser';
      }
  
      if (isServer) {
        const antStyles = /antd\/.*?\/style\/css.*?/;
        const origExternals = [...config.externals];
        config.externals = [ // eslint-disable-line
          (context, request, callback) =&gt; { // eslint-disable-line
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals),
        ];
  
        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader',
        });
      }
      return config;
    },
  };
  
  module.exports = withPlugins(
    [
      [withImages],
      [withCss],
      [
        withSass,
        {
          cssModules: true,
          cssLoaderOptions: {
            localIdentName: '[path]___[local]___[hash:base64:5]',
          },
        },
      ],
      [withSourceMaps],
    ],
    nextConfig,
  );
  </code></pre>
  
  <p>When I refresh the page all my styles are like this:</p>
  
  <p><a href="https://i.stack.imgur.com/oExft.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oExft.png" alt="enter image description here"></a></p>
  
  <p>I have a <strong>dynamic page</strong> called <strong>[cat]</strong>, so all the paths are like:</p>
  
  <p><strong><a href="http://localhost:3030/cat/static/css/antd.min.css" rel="noreferrer">http://localhost:3030/cat/static/css/antd.min.css</a></strong></p>
  
  <p>Do you know how can I fix this?</p>
  
  <p>When I route with Link everything is ok but when I refresh the page the assets are not found because of the dynamic route!</p>
  
  <p>this is the directory:</p>
  
  <p><a href="https://i.stack.imgur.com/cN5Xx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cN5Xx.png" alt="enter image description here"></a></p>