『Comparing Styling Methods In Next.js』 を読んで学びを書いてみた

元資料

www.smashingmagazine.com

Global CSS だったりStyled Components だったり、色々な スタイリング方法があって、それを比較する、という内容のエントリ。

知識として知っておきたかったので、読んでて そのついでに調べた事をメモしてみる。

ちなみに バックエンドの属性だけど React ... Next.js に興味がある人です。

前提条件として記述されていた事

_app.js_document.js_.babelrc は当然しってるよね? みたいな話が出てました。

_app.js について

_app.js は以前、 Tailwind CSS を導入する で出てきました。

www.ikkitang1211.site

公式情報は以下です。

nextjs.org

Next.js はAppコンポーネントを使用して、ページの初期化を行います。 _app.js 内に コンポーネントを オーバーライドする事でその制御をカスタマイズ出来る、という仕組みになっています。

ここの制御をカスタマイズする事で Global CSS を読み込ませたり、また エラーハンドリングをカスタマイズする事も可能、との事でした。

_document.js について

nextjs.org

Next.js を書いてる時は <html> タグや <body> タグ を書く意識をしなくても良いとは思いますが、 それをカスタマイズする事ができます。

簡単な例としては <Html lang="en"> とかですね。 今回の styling という主題に沿うと renderPage ってのをカスタマイズする事で サーバーサイドレンダリングをする際の css-in-js のライブラリを適切にロードさせる事ができる、って所だと思います。

_.babelrc について

nextjs.org

preset をカスタマイズする為にはこれを改修します。

babel is 何? はこの辺を読めばokって感じだろうか。

qiita.com

Demo Repository での各差異のまとめ

Stylingの方法全パターン

ここはメリデメ等の転記です

Global CSS

  • Global CSS の styling は pages/_app.js でのみ import 可能
  • ここでインポートしたスタイルはアプリケーション内の全てのページとコンポーネントに適用される

SASS/SCSS

  • Next.js は Sassを使ったスタイリングも出来る (Sassパッケージのインストールは必須)
  • Global CSS と同じように app.js でしかインポート出来ない

CSS Modules ( Component-Level CSS / Component-Level SASS/SCSS )

  • CSS Module というのは Component Level CSS で Next.js の中に内蔵されている
  • **.module.css という拡張子にすれば有効になる
    • **.module.scss**.module.sass にすると Sass形式でコーディングする事も可能
  • ( 公式サイトより引用 )
    • CSS Module は アプリケーションのどこにでもインポート出来る
    • ローカル・スコープ で衝突を気にする事なく 異なるファイルで同じCSSクラス名を使用出来る

Emotion

emotion.sh

Emotion is a CSS-in-JS library and like any other CSS-in-JS, allows you to write CSS styles with JavaScript.

  • CSS-in-JS のライブラリで、JavaScriptでCSSスタイルを記述する事が出来る
  • 書き方の例としてはこんな感じ
export const StyledBookFour = styled.div`
  color: white;
  width: 38px;
  height: 400px;
  margin-left: 20px;
  margin-right: 10px;
  background-color: #2faad2;
  transform: rotate(4deg);
`;

// <StyledBookFour/> として使う事が出来る

Styled JSX

github.com

  • Global CSS や CSS Module のように Styled-JSX は Next.js と連携して動作する
    • Styled-JSX は コンポーネント志向のCSS として提供される
  • こんな感じの書き方
      <style jsx>{`
        .book-five {
          color: #fff;
          width: 106px;
          height: 448px;
          margin-right: 23px;
          background-color: #000;
          transform: rotate(4deg);
        }
      `}</style>

Styled-Components

styled-components.com

  • Emotion と同じような感じ (JSでCSSスタイルを記述できる CSS-in-JS ライブラリ)
    • 設定が少し手間
    • .babelrc_document.js ファイルを作成する必要がある

全体のまとめ (の転記)

筆者の意見では、 Global CSS と Styled-Components で十分な事が多い。

一番の参考文書は 公式ドキュメント ↓

nextjs.org

まとめ

この元記事のまとめ、めちゃくちゃ有用だったな・・!

めちゃくちゃ勉強になった!!