nexjsとstyled-jsxを使ってみた。

最近nextjsを使用する機会があり、構築周りをやってなかったので、勉強のためにnextjsの構築とstyled-jsxの使い方を少し調べてみました。

nextjsの構築

nextjsの構築にあたって、nextjsのチュートリアルがあったので参考にやってみました。
https://nextjs.org/learn/basics/create-nextjs-app/setup

Reactアプリの準備

npm init next-app 任意のプロジェクト名 --example "https://github.com/zeit/next-learn-starter/tree/master/learn-starter"

npm init next-app 任意のプロジェクト名でnextjsのアプリが作れます。
--exampleをつけると指定したテンプレートを利用できるみたいです。

作成したディレクトリまで移動し、

npm run dev

を実行すると以下のような画面が表示されるかと思います。

こんな感じでnextjsアプリがすぐ立ち上がります。
これでnextjsを勉強する初歩の初歩の準備ができました。

ちなみにこのページは
プロジェクト名/pages/index.jsが表示されているので
試しに文言などを変えてみると更新されると思います。

エディタを保存してブラウザを確認しにいくとリロードをしなくても内容が変わっているかと思います。
(なぜリロードしなくても内容が変わるのかはまた別の機会に調べたいと思います。reactの開発サーバーにhot reloadingという機能があるらしくそれのおかげとかなんとか)

styled-jsx

上記の方法でnextjsの導入ができました。
ほとんど何もしてなかったので、デフォルトで導入されているstyled-jsxについてどういう書き方ができるか少し調べてみました。

styled-jsxは以下のような使い方ができます。

export default function Home() {
  return (
    <div>
      <p>サンプルテキスト</p>

      <style jsx>{`
        p {
          color: red;
        }
      `}</style>
    </div>
  )
}

基本的にはこのような形で記述ができます。
また、この<style jsx>で定義したcssはこのファイル内にしか適用されないので
別のファイル、コンポーネント間でトラブルが起こることは少ないかと思います。

globalな宣言

逆にglobalなcssを宣言したい場合は以下のようにすれば実現できます。

export default function Home() {
  return (
    <div>
      <p>サンプルテキスト</p>

      <style jsx global>{`
        p {
          line-height: 1.5;
        }
      `}</style>
    </div>
  )
}

<style jsx global>とすればこのコンポーネント意外にも適用できるのでうまく使えば
使いやすいかもしれません。

クラス

クラス名を付けたい場合は

export default function Home() {
  return (
    <div>
      <p className="sampleText">サンプルテキスト</p>

      <style jsx global>{`
        .sampleText {
          line-height: 1.5;
        }
      `}</style>
    </div>
  )
}

とすれば普通のcssと同じ感覚で使用できますね。

こんな感じでnextjsを触る準備ができたのでもっと触っていきたいと思います。
css周りで他にもstyled-componentsやCSS Modulesやemotionなど色々あるみたいなので触ってみたいと思います。

終わり