页面样式需要时间来加载 Next Js

Question

当用户打开页面或重新加载页面时，页面的样式需要时间来加载。 下个js工作时间不多，还在学习框架的硬技能。

这是我打开页面时显示的 gif。 当我重新加载或进入页面并立即返回时，也会发生这种情况： https : //imgur.com/J24YAPl

这是我的_document.jsx ：

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
    const styleTags = sheet.getStyleElement();

    return { ...page, styleTags };
  }

  render() {
    return (
      <html lang="en">
        <Head>
          {this.props.styleTags}

          <link rel="manifest" href="/manifest.webmanifest" />
          <meta name="them-color" content="#189AB4" />
          <link rel="apple-touch-icon" sizes="72x72" href="/next/icons/icon-72x72.png" />
        </Head>

        <body>
          <Main />
          <div id="portal" />
          <NextScript />
        </body>
      </html>
    );
  }
}

这是我的package.json ：

{
  "name": "novo-site",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "axios": "^0.21.1",
    "classnames": "2.2.6",
    "dotenv": "^10.0.0",
    "file-loader": "^6.2.0",
    "formik": "2.1.5",
    "jquery": "3.5.1",
    "lodash": "4.17.20",
    "next": "11.0.0",
    "next-absolute-url": "^1.2.2",
    "next-compose-plugins": "^2.2.1",
    "next-images": "^1.8.1",
    "next-transpile-modules": "^8.0.0",
    "normalize.css": "8.0.1",
    "polished": "3.6.5",
    "prop-types": "15.7.2",
    "react": "17.0.2",
    "react-animated-burgers": "1.2.8",
    "react-collapse": "5.0.1",
    "react-dom": "17.0.2",
    "react-icons": "^4.2.0",
    "react-is": "16.13.1",
    "react-on-screen": "2.1.1",
    "react-reveal": "1.2.2",
    "react-scroll": "1.8.1",
    "react-slick": "0.27.9",
    "react-sticky-el": "2.0.5",
    "react-string-replace": "0.4.4",
    "react-use": "15.3.3",
    "shortid": "2.2.15",
    "slick-carousel": "1.8.1",
    "styled-components": "^5.3.0",
    "styled-media-query": "2.1.2",
    "styled-system": "5.1.5",
    "typewriter-effect": "^2.18.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.39.1",
    "yup": "0.29.3"
  },
  "devDependencies": {
    "@types/react": "17.0.11",
    "typescript": "4.3.2",
    "webpack": "^5.23.0"
  }
}

Answer 1

在尝试修复项目中的其他错误后，我找到了解决方案。 基本上，我的项目有两个自定义页面， _app.jsx和_document.jsx ，但在/pages目录之外。 阅读文档后，可以看到与文档推荐的区别。 然后我将_app.jsx和_document.jsx移动到/pages文件夹并得到了正确的解决方案。

页面样式需要时间来加载 Next Js

问题描述

1 个解决方案

解决方案1
0 2021-06-21 19:41:00

页面样式需要时间来加载 Next Js

问题描述

1 个解决方案

解决方案1 0 2021-06-21 19:41:00

解决方案1
0 2021-06-21 19:41:00