<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
</head>
<body>
<h1>Nextjs build 에러 해결 방법 (Only set one of children or props.dangerouslySetInnerHTML react/no-danger-with-children)</h1>
<pre><code class="hljs language-bash">yarn  build
</code></pre>
<p>위 명령어로 빌드를 했을 때 아래와 같이 빌드 에러가 발생하는 경우가 있는데요.</p>
<p><img src="/assets/img/2022-11-25-Nextjs-build-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-1.png" alt=""></p>

<p><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4877378276818686" data-ad-slot="1898504329" data-ad-format="auto" data-full-width-responsive="true"></ins></p>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p>Only set one of children or props.dangerouslySetInnerHTML react/no-danger-with-children 이 에러는 dangerouslySetInnerHTML을 사용하는 요소는 한개의 children만 가져야된다는 에러입니다.</p>
<p>저는 아래와 같이 작성했었는데 이렇게 작성할 경우 <code>{}</code> 를 다른 자식으로 인식하기 때문에 발생했던 에러였습니다.</p>
<pre><code class="hljs language-tsx">&#x3C;span dangerouslySetInnerHTML={{ <span class="hljs-attr">__html</span>: titleText }}>{}&#x3C;/span>
</code></pre>
<h2>해결방법</h2>

<p><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4877378276818686" data-ad-slot="1898504329" data-ad-format="auto" data-full-width-responsive="true"></ins></p>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p>아래와 같이 <code>{}</code>를 제거하고 다시 빌드를 하게 되면 에러가 해결됩니다.
<code>{}</code>외에도 <code> </code>같은 공백으로도 빌들에러가 발생하게 되니 참고하시기 바랍니다.</p>
<pre><code class="hljs language-tsx">&#x3C;span dangerouslySetInnerHTML={{ <span class="hljs-attr">__html</span>: titleText }}>&#x3C;/span>
</code></pre>
</body>
</html>

# Nextjs build 에러 해결 방법 (Only set one of children or props.dangerouslySetInnerHTML react/no-danger-with-children)

```bash
yarn  build
```

위 명령어로 빌드를 했을 때 아래와 같이 빌드 에러가 발생하는 경우가 있는데요.

![](/assets/img/2022-11-25-Nextjs-build-에러-해결-방법-1.png)



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Only set one of children or props.dangerouslySetInnerHTML react/no-danger-with-children 이 에러는 dangerouslySetInnerHTML을 사용하는 요소는 한개의 children만 가져야된다는 에러입니다.

저는 아래와 같이 작성했었는데 이렇게 작성할 경우 `{}` 를 다른 자식으로 인식하기 때문에 발생했던 에러였습니다.

```tsx
<span dangerouslySetInnerHTML={{ __html: titleText }}>{}</span>
```

## 해결방법



<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4877378276818686"
     data-ad-slot="1898504329"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

아래와 같이 `{}`를 제거하고 다시 빌드를 하게 되면 에러가 해결됩니다.
`{}`외에도 ` `같은 공백으로도 빌들에러가 발생하게 되니 참고하시기 바랍니다.

```tsx
<span dangerouslySetInnerHTML={{ __html: titleText }}></span>
```

Only set one of children or propsdangerouslySetInnerHTML reactno-danger-with-children 에러 해결 방법에 대해서 정리합니다

Nextjs build 에러 해결 방법 Only set one of children or propsdangerouslySetInnerHTML reactno-danger-with-children

Nextjs build 에러 해결 방법 (Only set one of children or props.dangerouslySetInnerHTML react/no-danger-with-children)

해결방법