next jsとstyled components

11237 ワード
styled components next.js テキストリンク
ベースノードBURDレッスンを受けた後、天命コンポーネントを適用しましたが、最初はSSRの追加設定部分はありませんでした.
そのため、実際に個人プロジェクトに適用してもうまくいかなかったので、グーグルを検索するとdocumentやbabelが設定されている部分が見つかりました.
そこで講義を調べてみると、後半にはこれに関する講義があり、まず見てから、その通りにして、足りない内容は、グーグルを検索しながら補足します.

に質問

  • はnextjsで普段反応器で使用するスタイル-コンポーネントを使用しており、ページ離脱後に戻る際にcssが適用されないという問題がある
    • .

    何が違うの?


    styled-conentsのCSSはサーバ側レンダリングでは適用されません.

    処置


    nextはwebpack、babelをカスタマイズできます

    1. .babelrcファイルをパッケージします。jsonと同じ場所で作成


    npm i babel-plugin-styled-components
    {
  "presets": ["next/babel"],
  "plugins": [
    [
      "babel-plugin-styled-components", {
        "ssr":true,
        "displayName": true // 개발모드일때 브라우저에서 styled components의 클래스 이름을 쉽게 확인 할 수 있게 함
      }
    ]
  ]
}
    //さらに知る

    2.ドキュメントに追加する設定


    getInitialProps, getStaticProps, getServerSideProps

  • あるページに静的メソッドとして追加される非同期関数.

  • serversideプレゼンテーションを可能にし、初期データの埋め込みを許可します.
    つまり、ページは埋め込まれたデータのように送信できます.
    (SEOにおいて特に有用である.)
    • getInitialPropsは公式ドキュメントでも廃棄されています.
    getInitialiPropsドキュメントでのみ使用
    import Document, { Html, Head, Main, NextScript } from 'next/document';
// Import styled components ServerStyleSheet
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    // Step 1: Create an instance of ServerStyleSheet
    const sheet = new ServerStyleSheet();
    const originalRenderpage = ctx.renderPage;

    try {
      // styled components SSR 하는 부분
      // Step 2: Retrieve styles from components in the page
      ctx.renderPage = () =>
        originalRenderpage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });
      
      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } catch (error) {
      console.error(error);
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
        </Head>
        <body>
          <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
    2年前にブログの文章を読んだことがありますが、公式文書の例を見たほうがいいと思います.

    IE互換性


    https://polyfill.io/v3/url-builder/
    IEはmap、set、promise等をサポートしていない
    default~ずっとチェック
    babel充填物が重い

    参考文献

  • styled components公式ドキュメント
  • 正式文書の例
  • https://dev.to/aprietof/nextjs--styled-components-the-really-simple-guide----101c
  • ノードバーディコース:CSSサーバ側で
    • を表示
    Kibana + ElasticSearch + Logstash + Redis on RHEL 6
    ASP .( Net Core Service Lifetime )