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