Next.js+TailWindCssでInvalid or unexpected tokenが発生

はじめに

Typescript + React + Next.jsの勉強中です。

少しずつコードを書き始めました。

ですが、初回ロードのみ、なぜか下記のエラーが発生していました。

リロードすると消えます。

Uncaught SyntaxError: Invalid or unexpected token (at layout.js:287:29)

原因

tailwind.config.ts のcontentに、存在しないディレクトリを設定していた。

export default {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],

どうしてこうなったか

私が使用しているNext.jsのverが15のため、pagesディレクトリを使用していませんでした。

ですが、公式サイトに記載されていた設定をそのまま書いてしまっていたため
pagesディレクトリの記述も残ってしまったのです。

とりあえずやってみよう。
と理解せずに進めたのが悪かったです。

おわりに

pagesディレクトリの記述を削除するとエラーは消えました。
しかし、なぜ初回ロード時にのみエラーが発生するのかがまだ理解できていません。
レンダリングのタイミングなのでしょうか。。
まだまだ道のりは遠いですね。