開発日記-2024-07-16 / Clerkのアップデートでつまづいた

Clerk 5.2.3を使うとNext.jsのビルドエラーになる

`@clerk/nextjs@5.2.0` cause a build warning in NextJS middleware · Issue #3660 · clerk/javascript

Preliminary Checks I have reviewed the documentation: https://clerk.com/docs I have searched for existing issues: https://github.com/clerk/javascript/issues I have not already reached out to Clerk ...

github.com

Issueを読む。

'use server'

import { auth } from '@clerk/nextjs/server'

@clerk/nextjs/server を使用しているファイルに 'use server' を追加したら改善した。

@clerk/nextjs/server はサーバーサイドで使用しないといけないということで、'use client' にはしていなかったが、'use server' と明示しないといけないようだ。おそらく。

(7/17修正)

The "use server" annotation exposes an end point that makes all exported functions invokable by the client. The identifiers is currently a hash of the source code location. As long as a user gets the handle to the id of an action, it can invoke it with any arguments.

[翻訳]
アノテーション"use server"は、エクスポートされたすべての関数をクライアントが呼び出せるようにするエンドポイントを公開します。識別子は現在、ソース コードの場所のハッシュです。ユーザーがアクションの ID へのハンドルを取得している限り、任意の引数でアクションを呼び出すことができます。

https://nextjs.org/blog/security-nextjs-server-components-actions#write

'use server' は上記のような仕様なので、不用意に使わないようにして import 'server-only' を使うようにする。

pnpm add -E server-only

import 'server-only'

import { auth } from '@clerk/nextjs/server'

こうすることで、'use server' を使うべきところで使っていなかったことがエラーでわかるようになった。

Unknown at rule @tailwindscss(unknownAtRules) 対策

Unknown at rule @tailwindscss(unknownAtRules)

VS CodeでCSSファイルのTailwind CSSのディレクティブの部分(@tailwind base;など)でワーニングが出る場合の対応方法。

"files.associations": {
  "*.css": "tailwindcss",
  "*.scss": "tailwindcss"
},