Clerk auth : 基礎 Vercel要注意

=================

API / 500エラー

ClerkProviderでhtmlタグを囲うとAPI経由のブログ記事で 500 internal Error が出る

Localhostではエラーにならず、Vercelを経由する場合＝本番のみエラーになる

https://stackoverflow.com/questions/77224157/error-500-when-deployed-on-vercel-but-working-in-local

==================

ベースまで

やりたいこと： article slug のみ認証を設ける

docs : https://clerk.com/docs/quickstarts/nextjs

npm install @clerk/nextjs

nextjsバージョンでインストールすること。react or jsバージョンで npm インストールするとエラーになる

<ClerkProvider>
	<html lang="ja">
</ClerkProvider>

Layout.jsx のhtmlタグよりも外で使うこと

middleware.ts

middleware.ts は srcフォルダ直下に置くこと

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

export default authMiddleware({
  ignoredRoutes: ["/(.*\\..*)(.*)", "/(_next)(.*)"],
});

export const config = {
  matcher: ["/article"],
};

matcher に認証したいスラッグを記載

この場合はログイン後に/articleに移行する

.env.local :

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY

環境変数を任意のものに変えてはいけない。上手くいかなくなる
環境変数はVERCELに登録することを忘れず　そうでないとUPしたサイトで以下のエラーが出る

[Application error: a client-side exception has occurred (see the browser console for more information).]

Clerkを使う

デフォルトでサイト左上にログイン後にボタンが出る

← Go home