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

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

Next.js CSS

元資料

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

まとめ

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

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