У меня есть веб-сайт, созданный с помощью Next js, который нарушает стили на странице refre sh или когда пользователь заходит на веб-сайт напрямую по указанному маршруту c, а не по маршруту root. Например, https://vinnieography.web.app/contacts (если ссылка на сайт выглядит нормально, попробуйте обновить sh и посмотрите)
Сайт размещен на функциях Firebase и использует Next js и * 1006. * Компоненты Ant design .
Снимок экрана сайта перед ссылкой sh
Снимок экрана сайта после ссылки sh (обратите внимание на отсутствующую навигацию)
навигация не полностью отсутствует, но она стала мобильной навигацией, значок которой не отображается, но вы получаете выпадающий с ссылками Nav при наведении вокруг области Nav.
My next.config. js
const withCss = require('@zeit/next-css')
module.exports = withCss({
webpack: (config, { isServer }) => {
if (isServer) {
const antStyles = /antd\/.*?\/style\/css.*?/
const origExternals = [...config.externals]
config.externals = [
(context, request, callback) => {
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',
})
}
// Fixes npm packages that depend on `fs` module
config.node = {
fs: 'empty'
}
return config
},
distDir: "../../dist/client"
})
Версии Next js, React & Antd.
"antd": "^3.24.2",
"next": "^9.0.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"@zeit/next-css": "^1.0.1",
Вот ссылка на полное репо