[Web template] Next.js with-styled-components (2)

10939 ワード

Web template プロジェクト next.js project styled components テキストリンク

Github web-template
正式な書類 css-in-js方式styled-componentを採用

with-styled-components

1️⃣ _documents.tsx設定

_documents.tsxファイル

Next.jsが提供するドキュメントをカスタマイズできます

Next.jsページはマークアップ定義をスキップしているので、<html>、<body>、<head>などの処理が必要な場合は、_documents.tsxファイルを使用する必要があります

例)<Html lang='kr'>

SSR時に実行されるファイル_documents.tsxstyled-componentsスタイルコードを抽出するロジックを追加

2正式な書類参照getInitialProps methodを以下に示すように記述する

//pages/_documents.tsx

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

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html lang='kr'>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

2▼▼スタイル-アセンブリの取り付け

npm i styled-components @types/styled-components
npm install styled-reset
npm i --save-dev @types/styled-components

3π𔣤babel設定

Next.jsは,最初のSSRの後に内部ルーティングによりページ移動を行い,CSRを行う.
このとき,サーバが生成するハッシュ値がブラウザが生成するハッシュ値とは異なり,問題が発生する.

styled-componsesを使用すると文字列にスタイルが含まれるため、babelを別途使用して処理する必要があります.
従って、babel-plugin 패키지を取り付ける

npm install --save-dev babel-plugin-styled-components

その後、rootに.babelrcファイルを作成します.

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

Github web-template

Reference

この問題について([Web template] Next.js with-styled-components (2)), 我々は、より多くの情報をここで見つけました https://velog.io/@april_5/Web-template-Next.js-with-styled-components-2

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

dojo Menu

[伯俊]B 3-2511