Next.js x Firebase Book Log

これをやってく中でのメモ

https://zenn.dev/dala/books/nextjs-firebase-service/viewer/recoil

js tuple is unable to direct access like below?

let a, b;
[a, b] = [10, 20];

console.log(a);
console.log(b);

const [user, setUser] = useRecoilState(userState)
user.uid

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Next.jsって<Link>の前に全角スペースとかが入っていると上手く動かないかも‥。

1回user.tsのようにファイルを作っちゃうと、improtするときに../models/Userではエラーになることがあるが再起動とかしてると治る

import { User } from '../models/User'

ここわからん
useEffectとrecoilを使ってるauthentication.tsをimportしてるわけでもないのに、なんでホットリロードしたらState?が変わるんだ？？

修正してファイルを保存すると、ホットリロードにより画面が更新され、正しくユーザー ID が表示される状態となります。これは先程の状態とは異なりますので、再度ブラウザでページをリロードして「ロード中」の画面になるようにしてください

https://zenn.dev/dala/books/nextjs-firebase-service/viewer/user-detail-page

初回レンダリングの考慮で

if (query.uid !== undefined) {
      return
    }

ってしとったわ。。query.uidがあるのに毎回ここでreturnされちゃうからそりゃうごかんわ。。

global.cssなどが予め入ってるのは

yarn create next-app myapp

としたからか？

Next.js公式チュートリアルはcreate-next-appとなってるけど、これってリポジトリ名というよりはコマンド名？つまり同じものinstallしてるっぽい？

npx create-next-app myapp --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

user && という条件を入れることで、user が存在する場合のみに囲んだ部分の描画が行われる

        {user && (
            <h1>見出し</h1>
        )}

_app.tsxでimportすると全てのファイルで明示的にimportしなくても使えるようだ（global.scssとか）

Reactがドキュメントもチュートリアルも日本語化されてて充実しているので、Stateやprops ({}で渡せる) などを理解するためにやっておいたほうが理想的
https://ja.reactjs.org/

currentUser.uidでは画面をロードした状態でまだ値がないなどでエラーになるので、作成したuseAuthenticationをインポートして取得するuserを使う。

import { useAuthentication } from '../../hooks/authentication'

export default function Home() {
  const { user } = useAuthentication()

  print(user.uid)
  return (<div>hogehoge</div>)
}

useEffect()はSSR（Server Side Rendering）時は呼ばれちゃだめらしい？？よく分からん。SSRの基礎についてはこのQiitaがわかりやすかった
https://qiita.com/G-awa/items/639f4f83aa4d97bc1f0d

Recoil

A state management library for React.
https://recoiljs.org/docs/introduction/getting-started#atom

Atom

An atom represents a piece of state. Atoms can be read from and written to from any component. Components that read the value of an atom are implicitly subscribed to that atom, so any atom updates will result in a re-render of all components subscribed to that atom:

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

07. Recoilでユーザー情報を保存する

const { user } = useAuthentication()で、なぜuserをオブジェクトにして？returnし、また分割代入？でuserだけを受け取っているのかわからない。

export interface User {
  uid: string
  isAnonymous: boolean
  name: string
}

Hook API Referrenct

useState, useEffect, useRef などの仕様を知りたい場合に参照する
https://ja.reactjs.org/docs/hooks-reference.html

next/router

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/about')}>
      Click me
    </button>
  )
}

https://nextjs.org/docs/api-reference/next/router

router.query

query: Object - The query string parsed to an object.

https://nextjs.org/docs/api-reference/next/router#router-object

Firebaseのセキュリティー

こういうルールのためのメソッドがあるのか

request.resource.data.diff(resource.data).affectedKeys().hasOnly(['isReplied'])