Nextjsをvercelに上げたらでたエラーその1: シングルクォート

vercelでいくつかアプリを上げてきましたが
相当な頻度でエラーが起きたので備忘録で書きます
基本eslintを使用しているのでそのせいかもしれませんが

エラー内容

Failed to compile.
./src/app/account/page.tsx
20:30  Error: ' can be escaped with ', ‘, ', ’.  react/no-unescaped-entities
info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/app/api-reference/config/eslint#disabling-rules
Error: Command "npm run build" exited with 1

エラー理由

このエラーは、ESLintのルールに基づいて、コード内に不正な引用符（'）がそのまま使われているため発生しています。特に、HTMLやJSXで直接シングルクォート（'）が使われると、react/no-unescaped-entitiesというルールが警告を出します。このルールを回避するために、シングルクォートをエスケープする必要があります。

解決方法

<h1>
  {session.user.name}さんのアカウント
</h1>

このように、「さん」の後のシングルクォートが原因になることがあります。これをエスケープすることでエラーを回避できます。
修正方法： シングルクォートを'に変えることでエラーを防げます。
例えば、「さん」のアカウントの部分を以下のように修正します。

<h1>
  {session.user.name}&apos;さんのアカウント
</h1>

強引な方法

もしくは、単にESLintの設定を変更して、このルールを無効化することもできます。next.config.jsに以下を追加することで、エラーを無視する設定ができます。

module.exports = {
  eslint: {
    ignoreDuringBuilds: true,
  },
}