☰

Nextjs の本番アプリでページを更新するとスタイルが崩れる 質問する

tag-icon • tag-icon reactjs next.js antd
Nextjs の本番アプリでページを更新するとスタイルが崩れる 質問する

私は Nextjs で構築したウェブサイトを持っていますが、ページの更新時や、ユーザーがルートルートではなく特定のルートに直接ウェブサイトにアクセスしたときにスタイルが崩れてしまいます。例:https://vinnieography.web.app/contacts(サイトリンクが問題ない場合は、更新して確認してください)

このウェブサイトはFirebase Functionsでホストされており、NextjsとAntの設計コンポーネント。

更新前のサイトのスクリーンショット

更新前のサイトのスクリーンショット

更新後のサイトのスクリーンショット（ナビゲーションが消えていることに注意してください）

ナビゲーションは完全には失われていませんが、アイコンが表示されないモバイル ナビゲーションになりましたが、ナビゲーション領域の周りにマウスを移動すると、ナビゲーション リンクを含むドロップダウンが表示されます。

更新後のサイトのスクリーンショット

私の 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"
})

Nextjs、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",

ベストアンサー1

Material-UI NextJS の例で提案されているようにアプリを変更しても効果がない場合は、コンポーネントを遅延ロードすることができます。この方法では、クライアント側がロードされた後にのみスタイルを作成するように強制します。

コンポーネントの SSR を無効にするガイド:https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

import dynamic from 'next/dynamic'

export const ComponentWithNoSSR = dynamic(() => import('./Component'), {
  ssr: false,
})

ただし、コンポーネントは SSR のすべての特典を失うことに注意してください。

おすすめ記事