Open
7

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

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

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

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

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>
  );
}

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

対策としてはatomdangerouslyAllowMutability: trueとする。

https://github.com/facebookexperimental/Recoil/issues/406
export const currentUserState = atom<null | firebase.User>({
  key: "CurrentUser",
  default: null,
  dangerouslyAllowMutability: true,
});

ログインするとコメントできます