Iconnrysk

🎨 NextJS でページ毎に異なる背景画像を適用する方法

問題点

NextJS ではページ遷移をしても、以前のページの CSS が残ってしまう。 これにより、上位の要素（body や html など）の CSS を変更しても、以前のページの CSS が残ってしまうことがある。

解決策

ページ判定には CSS の :has() セレクタを活用する。 ページ毎に特定のクラスを設定することで、body 要素に現在のページを教えることができる。 例えば、body:has(.blog-page) のように記述することで、blog-page クラスが存在する場合にのみ適用される CSS を定義できる。

global.css
/* グローバルな背景画像を設定 */
body {
    background-image: url('/images/default-background.jpg');
}
/* 特定のページに対して背景画像を変更 */
body:has(.blog-page) {
    background-image: url('/images/blog-background.jpg');
}
app/blog/layout.tsx
function BlogLayout({ children }: { children: React.ReactNode }) {
    return (
        {/* ページ判定の為にページ特有のクラスを設定する */}
        <div className="blog-page"> 
            {children}
        </div>
    );
}