Nextjs assets 404 Not Found when using dynamic rouitng while ssr

Question

I had a static folder with an older version of nextjs. I updated my nextjs to use public folder.

"next": "^9.4.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",

this is my nextjs config:

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 => {};
}

const nextConfig = {
  env: {
    BUILD_ENV: process.env.BUILD_ENV,
  },
  webpack: (config, { isServer }) => {
    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) => { // 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,
);

When I refresh the page all my styles are like this:

I have a dynamic page called [cat], so all the paths are like:

http://localhost:3030/cat/static/css/antd.min.css

Do you know how can I fix this?

When I route with Link everything is ok but when I refresh the page the assets are not found because of the dynamic route!

this is the directory:

Please show how exactly styles are included in the code and full path where browser is looking for assets (can see if you hover over entry in Network browser tab). — Nikolai Kiselev, May 18 '20 at 12:57
the full path is => http://localhost:3030/cat/static/css/antd.min.css — Afsanefda, May 19 '20 at 06:41
and the styles are imported normally (it works fine when click on Link but it cracks when refreshing the page) — Afsanefda, May 19 '20 at 06:42

score 3 · Accepted Answer · answered Aug 05 '20 at 15:53

I had a similar issue where I was using Next.js Dynamic Routes to capture the URL path param but the CSS and JS assets would not load because it was prepending the path onto my Layout assets. i.e. in your sample, it would add cat in front of my asset's resource file path. My pages look something similar to: pages/cats/[something].js

I fixed this by adding a '/' to the resource path

Try correcting your Head/Layout

from:

<link rel="stylesheet" href="static/css/antd.min.css" />

to:

<link rel="stylesheet" href="/static/css/antd.min.css" />

This fixed my CSS and JS issues with displaying and pulling from the correct resource path link.

Nextjs assets 404 Not Found when using dynamic rouitng while ssr

1 Answers1