Next.jsのSSG出力したファイルをブラウザで確認すると正常に表示されません
解決したいこと
NextjsのSSGについての質問です
SSG出力したHTMLファイルをブラウザから確認してみると、CSSが反映されていませんでした
正常な表示
SSG出力したファイルをブラウザから確認した場合
dev機能やbuildからstartした際にはこのようなことは起こりません
next.config.js ファイルや、jsconfig.jsonファイルは以下の通りです
next.config
/** @type {import('next').NextConfig} */
const nextConfig = {
assetPrefix: '.',
trailingSlash: true,
reactStrictMode: true,
images: {
loader: "custom",
domains: ["images.microcms-assets.io"],
},
output: 'export',
}
module.exports = nextConfig
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
また、外部のAPI（microCMS）からの情報は正常に取得できていて、画像にも生成したHTML内の以下のようなリンクからアクセスできました
<link rel="preload" as="image"
imageSrcSet="https://images.microcms-assets.io/***"
imageSizes="(min-width: 1152px) 576px, 50vw" fetchpriority="high" />
.cssファイルや.jsファイルは次のようにインポートされていて、href、srcをクリックするとしっかりとアクセスできます。しかしcssは反映されていません。
<link rel="preload" href="./_next/static/css/8ce97dbe8dec8282.css" as="style" crossorigin="" />
<script src="./_next/static/chunks/webpack-6dcbb87b58667b3b.js" defer="" crossorigin=""></script>
また、ほかのページへ飛ぶためのリンクも使えませんでした
次のような要素が生成されていたので、
<li><a href="/about/">About</a></li>
次のようにできれば解決することはわかっているのですが、その方法がわかりません
<li><a href="./about/">About</a></li>
各種インポートは以下のように行っています
import Link from "next/link";
import styles from "@/styles/***.module.css"
import Image from "next/image";
import { microCMSLoader } from "@/lib/imageLoader";
正常に表示させるにはどうしたらいいでしょうか
これらの事例に心当たりがある方、教えていただけると幸いです
0
