次.スタイルのコンポーネントは本当に簡単なガイド▲ + 💅

15767 ワード

最近始めましたNext.js , そして、私が言わなければならない非常に正直に、素晴らしいツールです、あなたは箱からたくさんを得ます、そして、私が必要としない若干のものがある間、全体的に、それは静的で、サーバーの印をつけられたアプリケーションを作成するのが本当に簡単になります.
次はバンドルされていますstyled-jsx , これはJSX(サーバまたはクライアント上でレンダリングされた)のための完全な、スコープ付きでコンポーネントに優しいCSSサポートであり、これは素晴らしいですが、私はむしろスタイルのコンポーネントを使用して、それはちょうど私の好みです.
このガイドでは、どのように別のスタイリングソリューションを使用してstyled-jsx また、ユニバーサルスタイルをサポートしています.つまり、HTML内の最初のレンダリングに必要なスタイルを提供し、クライアントで残りを読み込むことができます.
次.jsはexample repo それはすでにスタイルのコンポーネントが付属していますが、あなたはそれをクローン化する必要がありますし、フードの下で起こっていることを理解しようとすると、私は次のスタイルのコンポーネントを作るプロセスを示すこの迅速かつ本当に簡単なガイドを作ることを決めた.js
それを得る!

1 .プロジェクトディレクトリを作成し、次のようにインストールします.

mkdir my-next-app && cd my-next-app && yarn add next react react-dom

Next.js only supports React 16.
We had to drop React 15 support due to the way React 16 works and how we use it.

Next.org

2 .スクリプトを追加するpackage.json

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^...",
    "react": "^...",
    "react-dom": "^..."
  }
}

その後、ファイルシステムはメインAPIです.あらゆる音.js ファイルが自動的に処理され、レンダリングされるルートになります.

3 .ページを作成してください.
プロジェクトのルートディレクトリから

mkdir pages && touch pages/index.js

生息する./pages/index.js :

export default () => (
   <div>
       <h1>My First Next.js Page</h1>
   </div>
)

それから、ちょっと走りますyarn dev 徐と号http://localhost:3000 .

これまでのところ、

自動転送とバンドル(WebpackとBabel)

ホットコード

サーバレンダリングとインデックス./pages

4 .スタイルコンポーネントを追加する

yarn add styled-components

編集しましょう./pages/index.js :

import styled from 'styled-components';

export default () => (
  <div>
    <Title>My First Next.js Page</Title>
  </div>
);

const Title = styled.h1`
  color: red;
`;

ページを再読み込みすると、エラーが発生します.これは、まだ設定をしていないので、心配しないでください.

バベルプラグインとカスタムを追加する.bablerc ファイル
まず、スタイル依存コンポーネントBabelプラグインをdev依存性としてインストールします.

yarn add -D babel-plugin-styled-components

その後、.babelrc プロジェクトのルートでファイルします.

touch .babelrc

バベルを追加

スタイル・コンポーネント・プラグインを加えてくださいssr フラッグトゥtrue , displayName to true and preprocess 嘘をつく.

ファイナル.babelrc ファイルは次のようになります.

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

注意:displayName デバッグが容易なクラス名を生成します(ハッシュの代わりにコンポーネント名も含みます)preprocess – 実験的特徴は明らかにオフになった.

6 .カスタムを作成する_document.js ファイル
あなたが使ったならばcreate-react-app 前に、あなたの主な文書は、よく、次の場所を知るために使用されます.jsはこのファイルを公開しませんが、_document.js あなたのページフォルダのファイル.

touch pages/_document.js

我々は、拡張されます<Document /> そしてサーバ側のスタイルを<head> .

To override that default behavior, you must create a file at ./pages/_document.js, where you can extend the Document class.
https://github.com/zeit/next.js/#custom-document

これが習慣だ_document.js ページをレンダリングしても、他に何もないならば

import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static getInitialProps ({ renderPage }) {
    // Returns an object like: { html, head, errorHtml, chunks, styles }     
    return renderPage();
  }

  render () {    
    return (
      <html>
        <Head>
          <title>My page</title>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

これはSSRスタイルのコンポーネントを追加すると、次のようになります.

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

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

    // Step 2: Retrieve styles from components in the page
    const page = renderPage((App) => (props) =>
      sheet.collectStyles(<App {...props} />),
    );

    // Step 3: Extract the styles as <style> tags
    const styleTags = sheet.getStyleElement();

    // Step 4: Pass styleTags as a prop
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>
          <title>My page</title>
          {/* Step 5: Output the styles in the head  */}
          {this.props.styleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}