Clerkでログイン機能を実装してみる。自分用

さくっと紹介します。
コードの解説は少なめです。
自分用の物なのでとてもわかりにくいです。

page.tsx

import { SignInButton, SignUp, SignUpButton, SignedIn, SignedOut, UserButton } from "@clerk/nextjs";

export default function Home() {
  return (
    <div>
        <SignedIn>
          サインイン中に表示されるコンテンツ
        </SignedIn>
        <SignedOut>
         サインアウト中に表示されるコンテンツ
        </SignedOut>
    </div>
  )
}

普通にクラークのAPIを読み込んでただフォームを表示させるだけだと
奇妙なURLに飛ばされてフォントも適用されなくて不便なためパスを指定します。

middleware.tsx

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
    publicRoutes: ["/"],
});

export const config = {
    matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

middleware.tsxはこのようになります。
配置場所はsrcフォルダを設置していればsrcの中に、ない場合は.env.localがある場所と同じ場所に配置しましょう。

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=clerkでプロジェクトを作成した際に出てくるkey
CLERK_SECRET_KEY=同じく
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

.env.localはこのようになります。ドキュメントに詳細あります。

続いてAppフォルダにsign-inフォルダとsign-upフォルダを作成してその中にそれぞれ[[...sign-in]]と[[...sign-up]]を作成します。さらにその中にそれぞれpage.tsxを作成します。

app/sign-in/[[...sign-in]]/page.tsx

import { SignIn } from "@clerk/nextjs";

export default function Page() {
    return <SignIn />;
}

app/sign-up/[[...sign-up]]/page.tsx

import { SignUn } from "@clerk/nextjs";

export default function Page() {
    return <SignUp />;
}

これで奇妙なURLに飛ばないようになります。
おしまい。