概要
Next.jsを使ってフロントを実装した際に気になった（注意した）ものをまとめたものです。
用語の説明が多いですが、実際に実装した例も示しています。
useStateについて（ステートフック）
状態を保持したい時に用いる。stateが作成されそれを変更することで動作に応じた状態が保存される
フックとは関数コンポーネント内から React の機能に「接続する (hook into)」ための関数のことです。フックの名前は必ず use から始まり、他にもまだ説明していない様々なフックがあります。
useStateを呼ぶと何が起こるのか
state 変数が宣言される
引数は？
一つだけ。stateの初期値。
何を返す？
現在のstateとそれを更新するための関数（これを通常、set<stateの名前>とする）
const [count, setCount] = useState()
state の呼び出し
クラス内で現在のカウント値を表示したい場合はthis.state.countを呼び出す
関数内では直接countを使うことができる
*分割代入について
reactでは[]を使うことで分割代入が可能になる
map()関数について
配列の中身をいい感じに使えるようにする関数
関数の違い
reactには、function()とアロー関数（() ⇒ {}）の二つがある
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
環境変数の導入
React.FCについて
typescriptのチェックを活かす為にReact.VFCの方がいい
【TypeScript】React.VFCとは何ぞや - Qiita
コンポーネントの定義方法
Reactでクラスコンポーネントより関数コンポーネントを使うべき理由5選
マテリアルデザインについて
本パッケージはCSRを前提にしているためSSRの場合は_app.jsと_document.jsにCSSの設定を記述する必要がある。実装例
React + Material-UIで管理画面を作成してみた | DevelopersIO
Import の中括弧について
Reactで{}(curly bracket or 中括弧 or 波括弧)をimportで使う理由 - Qiita
preventDefaultについて（js）
本来作動する機能（onClickやonSubmit）を制限すること
JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識 - Qiita
useEffect
コンポーネントに副作用を与えるためのhooks
定義した関数コンポーネントが呼び出された時に実行される
第二引数の配列の中身がトリガー。空の配列の場合初回レンダリングのみ実行される
undefined と nullの違い
OGP実装
metaタグを追加すればいい。