どんな話？
はじめて PowerShell を開き、本棚メモを Next.js のアプリ hondana へ引っ越した回です。@clerk/nextjs を入れ、2つの鍵を .env に置き、/memo を auth.protect() で守りました。cacheComponents: true のせいでログインの直後にエラーが出ましたが、Suspense で囲んで直りました。守ったのはページまでで、データの守りは第7話です。
この記事でわかること
- Next.js と @clerk/nextjs は、どちらも Node.js 20.9 以上が必要。制作は Next.js 16.4.1 と @clerk/nextjs 7.9.15
- 鍵は .env に2行。NEXT_PUBLIC_ はブラウザに届く印で、秘密の鍵には付けない。.gitignore の `.env*` の行は Select-String で確かめる
- proxy.ts の clerkMiddleware() は状態を読む係で、それだけではどのページも守らない。守るのは await auth.protect() の1行
- ログインしていない状態で /memo の答えを取ると 307 で、移り先は Account Portal のログインのページだった
- cacheComponents: true では、ログインの直後に「Next.js encountered runtime data during prerendering」のエラー。ClerkProvider と auth.protect() の部分を Suspense で囲んで直った
- Clerk CLI の init は鍵のコピーが要らない近道だが、ログインなしで作るのは新しいアプリなので、第2〜5話の設定が付いてこない
やることチェックリスト
0/6記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。
ぜんぶできた！おつかれさまでした。
くわしい手順と画面の図は、Xの記事にあります。
こんな人に
- HTML ファイル1枚のページにログインを付けたけれど、画面で隠したメモがソースから読めてしまう所で足が止まっている人
- はじめてターミナルを開いて、Next.js のアプリに Clerk を入れたい人
- ログインしていない人をサーバーの側で止めるページを作り、いまの Next.js で出るエラーの直し方も知りたい人
この話のTIPS
- コツファイル名は、Next.js 16 から middleware.ts が proxy.ts に変わりました。Next.js 15 以前なら middleware.ts で、中身は同じ、と Clerk の説明書にあります。
- 注意Git に一度入れた .env は、あとから .gitignore に書いても追跡が続く、と Git の説明書にあります。