React入門10　MUI on Next.js with TypeScript

今回はMUIを使います。MUIはボタンやフォームやレイアウトを簡単にCCSを書かなくても綺麗な装飾をしてくれます。
さて、MUIは色々なフレームワークに対応しています。下記に公式のテンプレートがあります。

Example projects - Material UI

今回はNext.js with TypeScriptですので、下記に従って、プロジェクトをダウンロード、インストールし、VScodeで開きます。

あなたがアプリケーションエンジニアで、ライブラリを作る側のエンジニアでなければ、アプリケーションの実現に必要なパーツ（マークダウン読み込みや地図の読み込み、AIサービスとの連携などなど）をいかに低コストで組み合わせるか、あるいは現状のライブラリで何ができるかを見極めるのが本質的な価値になると思います。
そして、第一に頼るべきは公式サイトと公式マニュアルです。
（歳をとると時間が有限であることを実感します。）

ということで、下記に従い環境構築します。

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs-with-typescript
cd nextjs-with-typescript
npm install
npm run dev

pagesにはindexとabautがあり、それぞれリンクにより行ったり来たりできます。srcには色々な独自コンポーネントがありますが、特に気をつけたいのが、Linkです。NextjsオリジナルのものをMUIにマッチするように拡張したものようです。
また、_app,_documentコンポーネントを上書きすることで、Nextjsに適応しているようです。スタイリングにはemotionを使うことがほぼ推奨されています。

こんにちはMUI！ 新しくなったMaterial UI v5

使い方は、下記で紹介されているビデオを見れば掴めると思います。

Learning resources - Material UI

基本的には、コンテナをまず用意して、グリッドでブラウザの横幅を12として、グリッドでサイズ指定したボタンなどの要素を、公式ホームページのサンプルからペタペタ貼り付けるというような開発の仕方となります。

MUIについては、情報も豊富で、公式サイトで紹介されているビデオが優秀すぎるので、そちらをご覧ください。

今回、UIフレームワークを調査していて、Mantineというフレームワークが気になりました。公式ドキュメントがしっかりしていて、元のコンセプトが優れている印象があります。
日本語の情報が少ないので、次回からはMantine入門を始めたいと思います。