Next.jsでマッチングサイト作るまでのメモ

ページの構成（HTMLタグ）がまだ頭の中で構築できないため、GoogleSlideで作成するページ分構成を書いた。
SEOは詳しく理解していないが、意識したくて複数サイトからページ構成・HTMLタグを調べて真似をした。

プロジェクト作成からモジュール追加・TS変更まで

yarn create next-app src
cd src
touch tsconfig.json
yarn add --dev typescript @types/react @types/node
yarn add firebase
yarn add @material-ui/core
yarn add @material-ui/icons
yarn add react-firebaseui
move pages/index.js pages/index.tsx
move pages/_app.js pages/_app.tsx

takeuma0825

Firebase Authenticationで認証機能を実装する。

takeuma0825

共通処理関係で参考

takeuma0825

ログイン後は一つ前のページに戻るようにする。

適切な方法か不明だが、ページ履歴を取得して直前のページ情報を抜き出す。
その値をuiConfigのsignInSuccessUrlに一つ前のページ情報を渡せればできる。

const uiConfig = {
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
  ],
  tosUrl: "/tos",
  privacyPolicyUrl: "/privacy",
  signInSuccessUrl: ""
};

takeuma0825

recoilを使ってログインページに飛ばす際にその時点のrouter.pathnameをグローバルステートに持たせる。

const uiConfig = {
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
  ],
  tosUrl: "/tos",
  privacyPolicyUrl: "/privacy",
  signInSuccessUrl: "/",
};

export default function SignInScreen() {
  const { pageHistory } = usePageHistory();
  uiConfig.signInSuccessUrl = pageHistory;
  return (
    <div>
      <h1>MyApp</h1>
      <p>Please sign-in:</p>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
    </div>
  );
}

takeuma0825

Recoilでfirebase.UserをセットしたらTypeError: Cannot freezeが発生した。

対策としてはatomのdangerouslyAllowMutability: trueとする。

export const currentUserState = atom<null | firebase.User>({
  key: "CurrentUser",
  default: null,
  dangerouslyAllowMutability: true,
});

takeuma0825

認証状態を以下記事をほぼ同様に実装したときに、ログインが必要なページのカスタムフックで認証状態のカスタムフックを実行して値を取得したいが正しく取れない。
認証状態設定済みのカスタムフックのはずだが、未認証となってしまう。

takeuma0825

この記事が参考になりそうだが、なんとなくしかわからない。
ライフサイクルをちゃんと理解する必要がありそう。