Next.js + TypeScript + Firebase でメール・パスワード認証機能を実装したい

Question

前提・実現したいこと

Next.js(React.js)でタイマーアプリを作っています。
Email + PassWordの組み合わせで認証機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

Server Error

Error: Error serializing `.currentUser` returned from `getServerSideProps` in "/".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

該当のソースコード

root/src/pages/settings.tsx

//ssr
import nookies from 'nookies';
...

export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  try {
    //cookieのuid取得
    const cookies = nookies.get(ctx);
    const { uid } = cookies;
    if (uid == 'undefined') {
      return {
        redirect: {
          destination: '/login',
          permanent: false,
        },
      };
    }

    return {
      props: { currentUser: uid },
    };
  } catch (err) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
};

type SettingProps = {
  currentUser: string;
};

const SettingPage: React.FC<SettingProps> = ({ currentUser }) => {
  const router = useRouter();

  //state
  const [xxx, setxxx] = useState(null);
  ...

root/src/pages/index.tsx

import nookies from 'nookies';
...

//ssr
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  try {
    //cookieのuserid取得
    //ssrだとhooksが使えずuseContextで取得できないため仕方なくcookieにもuserid情報持たせている状態
    const cookies = nookies.get(ctx);
    const { uid } = cookies;
    if (uid == 'undefined') {
      return {
        redirect: {
          destination: '/login',
          permanent: false,
        },
      };
    }

    return {
      props: { currentUser: uid },
    };
  } catch (err) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
};

試したこと

率直にエラーコードを解釈すると
「getServerSidePropsが返却したcurrentUserのシリアル化中にエラーが発生した。JSONとしてシリアル化するためにはnullを使用するか、この値を省略してください」と言われているので以下の記事を参考にコードを変更しました。

https://github.com/vercel/next.js/discussions/11209#discussioncomment-35915

root/src/pages/index.tsx

//ssr
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
  try {
    const props = await getServerSideProps() //ここを追加

    const cookies = nookies.get(ctx);
    const { uid } = cookies;
    if (uid == 'undefined') {
      return {
        redirect: {
          destination: '/login',
          permanent: false,
        },
      };
    }

    return { props: JSON.parse(JSON.stringify(uid)) } //ここを修正
    

以下のエラーのまま解決していない状況ですのでこの試行は外れかと思いました。

Server Error
Error: Error serializing props returned from `getServerSideProps` in "/".
Reason: Props must be returned as a plain object from getServerSideProps: `{ props: { ... } }`.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

何らかの対応策を教えていただければ幸いです。

補足情報（FW/ツールのバージョンなど）

package.json

  "dependencies": {
    "firebase": "^8.6.5",
    "next": "10.2.1",
    "nookies": "^2.5.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  },
  "devDependencies": {
    "@types/node": "^15.3.0",
    "@types/react": "^17.0.6",
    "@types/react-dom": "^17.0.5",
    "typescript": "^4.2.4"
  }

Answer 1

自己解決しました。
おそらくpackage.jsonに余計なものをインストールしていたようです。