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:

Banzai

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). – Isolationist

the full path is => localhost:3030/cat/static/css/antd.min.css – Banzai

and the styles are imported normally (it works fine when click on Link but it cracks when refreshing the page) – Banzai

Answer 1

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.

Gouty

Answer 2

I just need to change the value of src from

<img src="static/images/insta-1.jpg" alt="Insta1" width="83" height="83" />

to

<img src="/static/images/insta-1.jpg" alt="Insta1" width="83" height="83" />

Lannie

Answer 3

Don't know why but Nextjs doesn`t work with their own Image componenonent when dynamic routing.

The old html img tag works for me

<img src={${e.image.url}} alt="punkies y cerebro showcase" />

Palinode