Clerk 5.2.3を使うとNext.jsのビルドエラーになる
![`@clerk/nextjs@5.2.0` cause a build warning in NextJS middleware · Issue #3660 · clerk/javascript](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2Fad4fb7c2-b6d3-4a02-8c5f-b939e883e640.png&w=3840&q=75)
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"
},