Next.jsとFirebaseで質問箱のようなサービスを作る

Reactチュートリアルをとりあえずよくわからないながらやったくらいのレベル感です。

感想メモ

1

yarn add --dev typescript @types/react @types/node

これだけでTSの設定まで埋めてくれるんですか！！すご！！

if (process.browser)　SSRとかでよく使うっぽい記述。
Nuxt.jsでSSRかブラウザ上の処理かを判定する方法の一つ - Crieit

【疑問】_app.tsxとindex.tsxはNextにおいてどういう位置づけなんだろう。

Hookが出てきたからReduxが下火なんか。そういやそんなこと言っとった気が。
フックの導入 – React

useEffectの使用法はとりあえず、@user ||= User.find(id)だと思っておく（多分そんなことはない）。
この辺はライフサイクルの知識が必要ですね。

useEffectは何をやっているのか？
このフックを使うことで、レンダー後に何かの処理をしないといけない、ということを React に伝えます。
副作用フックの利用法 – React

useEffectで第二引数に空配列を渡す意味がわからんな。

1
2
3
4
5

useEffect(function, [])

function() {
  return { user }
} // null許可

こんな感じになるわけだけど。

Firestoreは読み込みより書き込みのほうが高いから、重複して書き込むより、わざわざuidでuserがあるかを読み込んで確認して、ある場合のみ書き込むようにしている。
これが実際に「絶対に新たに書き込む」場合なら強制書き込みのほうがいい。
ってことかな？

例えばpages/users/show.tsxというファイルを作ればhttp://localhost:3000/users/showというページを表示することができます。

これはNuxtもそうやんな。よしなにやってくれる部分。

「ユーザー詳細画面を作成する：SSR の考慮」のところuseEffectらへん全然わかってない。。

1

const [value, setValueg] = useState("初期値");

getterとsetterみたいなもんで、

1
2

value={body}
onChange={(e) => setBody(e.target.value)}

こんな感じでバインドする。

1
2
3
4
5
6

import { useRouter } from "next/router";
import { FormEvent, useEffect, useState } from "react";
import { User } from "../../models/User";
import firebase from "firebase/app";
import Layout from "../../components/Layout";
import { toast } from "react-toastify";

{}があるのとないのは何が違うんや
分割代入みたいなもんだとは思うんだけど、まあライブラリ側で決まってんのかな
exportの仕方か？

1
2
3
4
5
6
7

// import側
import { useAuthentication } from "../../hooks/authentication";

// export側
export function useAuthentication() {
  return { user };
}

console.log({ user });の出力→{ user: null }