浮気症は治らず、今度は React にも手を出してみます。
React のチュートリアル
まずはチュートリアル。
が、始めようとすると、ちゃんと JavaScript は抑えてねと。 なので、先にこちら。
Next.js のチュートリアル
それぞれ、特に問題なく終了したので、すかさず Next.js に入ります。
大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました
途中、下記のエラーに悩まされました。
Failed to compile
./lib/posts.js
Module not found: Can't resolve 'fs' in '/Users/konnokiyotaka/workspace/ReactTutorial/nextjs-blog/lib'
色々情報漁りましたが、結局は getStaticProps が getStaticprops になっていたのが原因。（大文字小文字） configに "fs": false を書くとか、 target: ‘node’ を書くとか不要でした。 getStaticProps は サーバサイドでのみ 実行される！ 覚えておきましょう。
デプロイのところも、みんな Git は普通に使えるよね、というトーンなので、若干調べながらになりました。 こんな感じになりますね。
git checkout -b test1
# （いくつか変更を加えて、GitHub に push する）
git push origin test1
TypeScript への変換は、まあそんな感じかということで途中でやめてしまいました。 が、やはり TypeScript の方が良いよなとは思っています。
git mv components/date.js components/date.tsx
git mv components/layout.js components/layout.tsx
git mv lib/posts.js lib/posts.ts
git mv pages/posts/[id].js pages/posts/[id].tsx
デザインテンプレートとディレクトリ構成
では、実際何か作ってみようというところで、いつも悩むのが、デザインをどうするか。
Reactでの定番は、 MATERIAL-UI なのでしょう。 こんなサンプルのイメージで作れるなら良いかなと思いますので、やってみます。
ところが、ここのサンプルは、必要なコンポーネントのソースが提供されているのみで、プロジェクト全体が提供されているわけではない。 で、 MATERIAL-UI として、様々なプロジェクト一式のサンプルが提供されているので、その中から TypeScript 版Next環境を使用することにしようと思いました。
Next.js with TypeScript example
curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/nextjs-with-typescript
# cd nextjs-with-typescript
mv nextjs-with-typescript material-dashboard
cd material-dashboard
npm install
npm run dev
こんな感じでやると、サンプルページが開きます。 ところが、これもシンプルな構成で、 pages と src が並んでおり、src の中に、コンポーネントを作っていく感じ。 けど、チュートリアルでは、 components, pages, lib という感じで並べていたよな・・・。
Nuxt.js だともう少し定義してくれていたと思いますが、そのくらいは決めてしまった方が良いのではと思ったり。
また、この辺を調べていくと、 Atomic Design とか気になりますが、 Molecules(分子)と Organisms(有機体)の区分けは微妙だなと思ったり。こちらの方のこれくらいだとちょうど良いかな。
小中規模 Next.js Application で利用する技術選定
もう一つの候補は、 Material Kit React というフリーで提供されているデザインテンプレートの構成を使わせてもらうこと。
pages じゃなくて、 views なんだ、全部 src に入れるんだ、とか思いますが、分け方はシンプルで良い気もする。 と思ってみてたら、まったくフリーなわけでもなく、公式ブログで触れられていたりもするのですね。
Next.js 9.1 ※現時点で最新は9.5。
が、こうして調べていくと、 Vue は日本語ドキュメントが充実している、という意味が噛みしめられます。
やはり、 Vue, Nuxt でもう少しがんばってみますか。