Nextjs assets 404 Not Found 在 ssr 中使用动态路由时答案

【问题标题】：Nextjs assets 404 Not Found when using dynamic rouitng while ssrNextjs assets 404 Not Found 在 ssr 中使用动态路由时
【发布时间】：2020-09-04 00:50:00
【问题描述】：

我有一个带有旧版本 nextjs 的静态文件夹。我更新了我的nextjs 以使用public 文件夹。

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

这是我的nextjs 配置：

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,
);

当我刷新页面时，我的所有样式都是这样的：

我有一个名为[cat]的动态页面，所以所有的路径都是这样的：

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

你知道我该如何解决这个问题吗？

当我使用 Link 进行路由时，一切正常，但是当我刷新页面时，由于动态路由，找不到资产！

这是目录：

【问题讨论】：

请显示样式是如何包含在代码中的以及浏览器正在查找资产的完整路径（可以查看您是否将鼠标悬停在网络浏览器选项卡中的条目上）。
完整路径为 => localhost:3030/cat/static/css/antd.min.css
样式导入正常（点击链接正常，但刷新页面时崩溃）

标签： reactjs next.js assets server-side-rendering dynamic-routing

【解决方案1】：

我有一个类似的问题，我使用Next.js Dynamic Routes 来捕获 URL 路径参数，但 CSS 和 JS 资产不会加载，因为它会将路径添加到我的布局资产上。即在您的示例中，它会在我的资产的资源文件路径前添加cat。我的pages 看起来类似于：pages/cats/[something].js

我通过在资源路径中添加“/”来解决此问题

尝试纠正你的头部/布局

来自：

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

到：

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

这解决了我在显示和从正确的资源路径链接中拉取时出现的 CSS 和 JS 问题。

【讨论】：

【解决方案2】：

我只需要将src的值从

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

到

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

【讨论】：