Next.jsをVercelにデプロイ→エラー(Error: '
can be escaped with '
, ‘
, '
, ’
. react/no-unescaped-entities)
エラーの解説
Next.jsのページのコンテンツ部分にシングルクォーテーション'
があるとVercelにデプロイの際、「Error: '
can be escaped with '
, ‘
, '
, ’
. react/no-unescaped-entities」というようなビルドエラーをVercelが吐いてデプロイできない。
ページコード例:
const Index = () => {
return (
<h1>I'm Atom</h1>
<p>Lorem Ipsum has been the industry's standard dummy text</p>
)
}
export default Index
上記のコード例だと、<h1>
タグの中身I'm Atomと<p>
タグの中身…the industry's standard…という文章にシングルクォーテーションが使われている(赤文字)。
Vercelがこれはイカン!とおっしゃる。
解決方法
それぞれの文章を波カッコとバックチックで囲った。
const Index = () => {
return (
<h1>{`I'm Atom`}</h1>
<p>{`Lorem Ipsum has been the industry's standard dummy text`}</p>
)
}
export default Index
これでデプロイ成功した。しかし日本語コンテンツであればほとんど遭遇しなさそうなエラーだが、アルファベット圏の方々は皆このようにしているのだろうか???
仕様レベルのインシデントかと思われるが…
参考
19:259 Error: '
can be escaped with '
, ‘
, '
, ’
. react/no-unescaped-entities