reactjs - Nextjs assets 404 Not Found 在 ssr 中使用动态路由时
问题描述
我有一个带有旧版本的静态文件夹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 进行路由时,一切正常,但是当我刷新页面时,由于动态路由,找不到资产!
这是目录:
解决方案
我有一个类似的问题,我使用Next.js 动态路由来捕获 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 显示和从正确的资源路径链接中提取的问题。
推荐阅读
- bash - 如何从 shell 上的 cURL 检索错误代码
- java - 尝试调用 getItemCount() 两次时无法访问语句
- c++ - 在少数独立功能中使用相同的对象形式类
- android - 在 RelativeLout 内将 TextView 对齐到 LinerLayout 上方
- amazon-web-services - 对 AWS 中的资源执行标记?
- python - 从时间序列数据创建正弦波(Python)
- python - 如何在测试中为多个功能重用相同的模拟
- android - Cordova 应用程序中的 YouTube iframe:“此视频不可用”
- build - 什么是构建前缀?
- uicollectionview - 从 UICollectionView 拖动时获取项目的框架