Open9
Next.jsでマッチングサイト作るまでのメモ
takeuma0825ページの構成（HTMLタグ）がまだ頭の中で構築できないため、GoogleSlideで作成するページ分構成を書いた。
SEOは詳しく理解していないが、意識したくて複数サイトからページ構成・HTMLタグを調べて真似をした。
takeuma0825プロジェクト作成からモジュール追加・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
Firebase Authenticationで認証機能を実装する。
takeuma0825共通処理関係で参考
takeuma0825ログイン後は一つ前のページに戻るようにする。
適切な方法か不明だが、ページ履歴を取得して直前のページ情報を抜き出す。
その値を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が発生した。
対策としてはatomのdangerouslyAllowMutability: trueとする。
export const currentUserState = atom<null | firebase.User>({
key: "CurrentUser",
default: null,
dangerouslyAllowMutability: true,
});
認証状態を以下記事をほぼ同様に実装したときに、ログインが必要なページのカスタムフックで認証状態のカスタムフックを実行して値を取得したいが正しく取れない。
認証状態設定済みのカスタムフックのはずだが、未認証となってしまう。
takeuma0825この記事が参考になりそうだが、なんとなくしかわからない。
ライフサイクルをちゃんと理解する必要がありそう。