Components

import Link from 'next/link';
import { useEffect, useState } from 'react';
import supabase from '../lib/supabase';

export default function Header() {
    const [user, setUser] = useState(null);

    useEffect(() => {
        const checkUser = async () => {
            const { data: {user} } = await supabase.auth.getUser();
            setUser(user);
        };
        checkUser();
    }, []);

    return (
        <header>
            <section>
                <h1>SITE NAME</h1>
                { user ? (
                    <div>
                        <Link href="/user/mypage">マイページ</Link>
                        <button onClick={() => supabase.auth.signOuth()}>ログアウト</button>
                    </div>
                ) : (
                    <div>
                        <Link href="/user/signup">アカウント登録</Link>
                        <Link href="/user/login">ログイン</Link>
                    </div>
                )}
            </section>
            <nav>
                <ul>
                    <li>
                        <Link href="/">HOME</Link>
                    </li>
                    <li>
                        <Link href="/prouct/add">出品</Link>
                    </li>
                    <li>
                        <Link href="/">HOME</Link>
                    </li>
                    <li>
                        <Link href="/">HOME</Link>
                    </li>
                </ul>
            </nav>
        </header>
    );
}

export default function Footer() {
    return ();
}