目次

１. 問題の経緯
 ２. 開発環境
 ３. 解決手順
 ４. 結果
 ５. おわりに

１. 問題の経緯

@supabase/auth-helpers-nextjsを使用して、ログイン機能を作成したのですが、
ログインをしていない状態でトップページにアクセスすると、
「ログイン後にしか見られない画面が一瞬見えてしまう（チラつき）」
という事象が発生しました。
調べてみた感じだと、特にバグとかそういうのではなさそうでした。

loading.tsxやSuspenseコンポーネントを使用して解決を試みたのですが、
なかなか上手くいかなかったので、今回の方法で落ち着きました。（完全敗北）

なお、今回のログインには、SupabaseのcreateServerComponentClientを使用して、
サーバーサイドで認証されたユーザーのsessionを使用します。

2. 開発環境

Package	Version
next	14.0.4
react	^18
tailwindcss	^3.3.0
@supabase/auth-helpers-nextjs	^0.9.0
@supabase/supabase-js	^2.39.3

3. 解決手順

まず、以下のように、認証されたユーザーのsessionを取得します。

Component.tsx

const supabase = createServerComponentClient({ cookies });

const { data: { session } } = await supabase.auth.getSession();

※サーバーコンポーネントになるので、"use client"を使用しているコンポーネントで使用する場合は、このセッション情報をpropsで渡して使用する、など工夫が必要です。

次に、useRouterを使用して、セッション情報がないユーザーはログイン画面に遷移させる処理を書きます。

page.tsx

import { useRouter } from "next/navigation";

const router = useRouter();
if (session === null) {
  router.push("/login");
}

この処理が発火するまでに一瞬画面が見えてしまうわけですね。

そこで、sessionの状態で見せる画面（コンポーネント）を切り替えるようにします。

page.tsx

return (
  <>
    {session ? (
      // ログイン後に見える内容
    ) : (
      // 未ログインの場合に見える内容
      // ex. 真っ白な画面
      <div className="fixed h-full w-full bg-white"></div>
    )}
  </>
);

4. 結果

チラつきが発生する間は真っ白な画面が表示され、
少しだけUIが良くなったと思います。

5. おわりに

Next.jsの場合、ビルド後はさほど気にならないぐらい短いですが、気になる方はお試しを。
あと、この方法以外で良い解決策があったら教えて下さい。

以上です。