はじめに
仕事でWEBページの作成を行うことになり、デザインの共通化や勉強がてらにTypeScriptとNext.jsを使って開発することにした。
そのときに参考にしたページや、悩んだことなどを記載したいと思う。
開発環境
- Windows10
- Node.js
- TypeScript
- next.js
- VSCode
- Chrome
環境構築
VSCodeのインストール
もともとVSCodeが入っていたのでそのまま使用。
拡張機能も特に追加していないが、Chromeを見ながらのHP作成程度なら特に問題なくできる。
Node.jsのインストール
まずはnode.jsにアクセスすると早速洗礼が。
LTS版か最新版どっちがいいのかの選択で悩むが、一応仕事で使うし、最新版を使うならローカルではなくDocker上で開発したほうが何かといいと思ったので今回はローカル上で開発するのでLTS版を選択。
TypescriptとNext.jsのインストール
Next.jsではじめるTypescript環境を参考というか、書いてあることを無心で行い無事環境をつくれた。
悩んだこと
1. 共通デザインをどうやって作るか
ヘッダーとフッターを全ページ共通にしたいのに、いちいちコードを書くのは面倒なので共通化の方法をググってみるも、
やれレイアウト用コンポーネントを作れだの、_app.jsに書くんだだの、いやいや_document.jsだのといろいろ出てきて悩んだ。
結局どうしたかというと_app.jsに共通デザインを作成して各ページの内容は各jsに記載した。
理由としてはレイアウト用コンポーネントだと結局各ページに意識的にそのコンポーネントを記載しないと行けないので面倒。
_document.jsではない理由は、StackOverflowやいろんなブログを見てみると共通デザインは_app.jsと書いてあったのでそれにならう事にした。
2. 画像等の静的コンテンツをどこに置くか
next.jsでは静的コンテンツをpublicフォルダに置く事になるが、Next.jsではじめるTypescript環境を参考にした環境にはsrcフォルダがあり、ソースコードはその中に置くことになる。
通常であればプロジェクトのフォルダの直下に作成するPublicフォルダを、そのまま直下で作成していいものなのか、srcフォルダ配下に作成するべきなのかで悩んだ。
結局のところsrc配下にpublicフォルダを作成してその中に画像を配置したが、普通に参照/表示できたので問題ないと思う。
3. CSSの書き方
各ページやコンポーネントのCSSの書き方で何回も試行錯誤することになった。
正直書き方がいろいろありすぎて何が正解かはわからないが、最終的に落ち着いた方法を記載する。
1. 全ページ共通のデザインはglobal.cssに記載する
全ページ共通はglobal.cssというのを作成して、_app.jsでimportすれば全ページに反映されるのでオススメ。
参考:Nextjs-Built-In CSS Support
2. 各ページやコンポーネントのCSSは<style jsx>に書く
各ページやコンポーネントに反映するスタイルは[コンポーネント・ページ名].module.cssでもできるみたいだが、
ググるとなくなるかもという記載があるところもあり、今推奨は<style jsx>に書くらしいのでこちらにした。
スタイルをDictionaryで書いて変数に代入して各タグのStyleプロパティに設定する方法もあるが、こちらは細かいのができないのと、プロパティ名の置き換えなどが面倒くさい。
細かいことは例えばhoverやbeforeの設定の仕方がわからなかったり、下位タグへの設定もやりづらいので普通にCSSがかける方がやはり楽。
3. １つしか反映とかちょっとしたものはstyleプロパティに直書きする
上の2でStyleプロパティに書くのは細かいことができないと書いたが、例えば”text-align：center”だけ置きたいときなどはいちいちクラス名を書いたりするのが面倒なのでこういうのはStyleプロパティに直書きしたほうが楽。
でもソースの各場所にCSSが点在するのは後のメンテナンスコストが上がるのでできればglobal.cssと<style jsx>で完結する方がいいと思う。
おわりに
まだまだNext.jsやTypescriptに慣れていないのでもしかしたらもっといい方法があるかもしれないし、間違っていることもあるとは思うのでコメントやご指摘を頂ければと思います。
まだまだNext.jsやTypescriptでの開発の記事が少ないのでやりたくてもわからないという方が多いでしょうが（私も同じですが。）、これを参考にいろんな人が開発してそのノウハウが広まっていってほしいと思います。