(コピペでOK)material-uiで簡単にsigninページを作ってみた

開発環境

@material-ui/core: ver 4.11.4
@material-ui/icons: ver 4.11.2
nextjs(未検証ですが、Reactでも動きます): ver 11.0.0

インストール

npmもしくはyarnを使ってインストールしましょう

    // with npm
    npm install @material-ui/core
    npm install @material-ui/icons

    // with yarn
    yarn add @material-ui/core
    yarn add @material-ui/icons

signinページ

signin.jsをpagesディレクトリの直下に作ります。
そして、GitHubにあるSignIn.jsをコピペします

コピペしただけで作れました🎉
あくまで、デザインだけなのでここからDBの連携やボタンを押したときの挙動など
機能面は別途作る必要があります。(ここでは省略します)

リファクタリング

まず、拡張子がjsとなっているのでjsx(Typescriptの場合はtsx)にします
次に、コンポーネント化していきましょう
ソースコードみてるとcopyrightのところはコンポーネントとして扱えそうです。

なので、下記のようにディレクトリとファイルをそれぞれ作っていきましょう。

あとはcopyrightの'index.jsx'にcopyrightのところをコピペ(exportする必要はありますが)すればOK

signinページでimportするのも忘れないようにしましょう

他にもテンプレートがあるので興味があれば使ってみてください

参考

github

テンプレート(公式ページ)