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
– Nikolai Kiselev, Commented May 18, 2020 at 12:57
the full path is => localhost:3030/cat/static/css/antd.min.css — Afsanefda
– Afsanefda, Commented May 19, 2020 at 6:41
and the styles are imported normally (it works fine when click on Link but it cracks when refreshing the page) — Afsanefda
– Afsanefda, Commented May 19, 2020 at 6:42

Kelvin · Accepted Answer · 2020-08-05 15:53:25Z

9

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.

answered Aug 5, 2020 at 15:53

Kelvin

6897 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sanglt · Accepted Answer · 2021-10-02 17:17:34Z

0

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" />

answered Oct 2, 2021 at 17:17

sanglt

3394 silver badges5 bronze badges

Comments

Alejandro Yunes · Accepted Answer · 2022-01-23 11:03:42Z

0

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" />

answered Jan 23, 2022 at 11:03

Alejandro Yunes

952 bronze badges

Collectives™ on Stack Overflow

Nextjs assets 404 Not Found when using dynamic rouitng while ssr

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related