CODEWITHSUNDEEP
reactjsnext.jsassetsserver-side-renderingdynamic-routing
Afsanefda
Afsanefda

Reputation: 3339

Nextjs assets 404 Not Found when using dynamic rouitng while ssr

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:

enter image description here

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:

enter image description here

Upvotes: 7

Views: 10246

Answers (3)

Alejandro Yunes
Alejandro Yunes

Reputation: 85

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

Upvotes: 0

sanglt
sanglt

Reputation: 339

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

Upvotes: 0

Kelvin
Kelvin

Reputation: 689

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.

Upvotes: 9

Related Questions