🐙

【NextJs14】NextJs14 と便利なライブラリ【#６Clerk UserProfile】

2023/12/16に公開

Next.js

Clerk

shadcn/ui

tech

【#６Clerk UserProfile】

YouTube: https://youtu.be/l-xVb6MbtlQ

https://youtu.be/l-xVb6MbtlQ

今回はClerkでログインした後のユーザー情報の取得について解説します。

まずはログイン後にTOPページが表示できないように.envファイルを修正します。

.env

NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/protected
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/protected

app/(main)/protected/page.tsx

import { UserButton, auth, currentUser, UserProfile } from "@clerk/nextjs";
import Image from "next/image";

const ProtectedPage = async () => {
  const { userId } = auth();
  const user = await currentUser();

  return (
    <div className="flex flex-col p-10">
      <div className="flex items-center gap-x-2">
        <UserButton afterSignOutUrl="/" />
        <p>User ID: {userId}</p>
      </div>
      <ul className="flex flex-col p-6">
        <li>
          User Name: {user?.lastName} {user?.firstName}
        </li>
        <li>User Email: {user?.emailAddresses?.[0].emailAddress}</li>
        <li className="flex gap-x-2">
          User Image:{" "}
          <Image src={user?.imageUrl!} width={30} height={30} alt="User" />
        </li>
      </ul>
      <UserProfile />
    </div>
  );
};

export default ProtectedPage;

【#６Clerk UserProfile】

Discussion