Next.js – Warning: Prop `dangerouslySetInnerHTML` did not match

I use Next.js and I’m getting a content key from an API call. I am trying to render this content key with dangerouslySetInnerHTML, but I’m getting an error 🙁

Error:
Error Image

My Function

function Post({ content }) {
  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </div>
  );
}

My API call returns this JSON:

{
  "posts": [
    {
      "id": "d27a1b6ff17a",
      "title": "A’dan Z’ye Typescript",
      "thumbnail": "https://cdn-images-1.medium.com/max/1024/1*9eMyWLYOqU5aqBtVoFoi3Q.jpeg",
      "description": "Typescript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.",
      "content": "n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9eMyWLYOqU5aqBtVoFoi3Q.jpeg"><figcaption>A’dan Z’ye Typescript</figcaption></figure><h3>Typescript Nedir?</h3>n<p>Typescript, Microsoft tarafından geliştirilen açık kaynak bir programlama dilidir. JavaScript diline katı kurallar eklemeyi sağlar.</p>n<h3>Typescript Özellikleri</h3>n<p>★ <strong>Typescript = Javascript’tir: </strong>Typescript temel yapı taşlarını Javascript’ten alır. Bu nedenle Typescript’i öğrenmeden önce Javascript yetkinliğinizin olması gerekir. Typescript ile yaptığınız bütün geliştirmeleriniz, <em>makalenin kurulum adımında</em> da göreceğiniz üzere Javascript’e dönüştürülür.</p>n<p>★ <strong>Typescript, tüm Javascript kütüphanelerini destekler: </strong>Typescript ile derlenen javascript çıktısı, bütün javascript kütüphaneleri ile birlikte kullanılabilir.</p>n<p>★ <strong>Typescript, taşınabilir ve portatiftir: </strong>TypeScript platform-serbest bir dildir ve farklı tarayıcılarda, cihazlarda, işletim sistemlerinde çalışabilir. javascript’in çalıştığı herhangi bir ortamda çalışabilir. Hali hazırda javascript ile geliştirilme yapılan bir projeye entegre edilebilir.</p>n<h3>Typescript Avantajları</h3>n<p>★ Typescript, nesne yönelimlidir.</p>n<p>★ Typescript, statik veri tiplemesine sahiptir.</p>n<p>★ Typescript, ES6 özelliklerini içeririnde barındırır.</p>n<p>★ Typescript, modülerdir.</p>n<p>★ Typescript’in söz dizimi Java, C# gibi yüksek seviyeli dillere benzerdir.</p>n<p>Typescript kodları, tarayıcılar tarafından direkt olarak yorumlanamayacağı için kodların derlenmesi ve javascript çıktısının oluşturulması gerekiyor.</p>n<p>Eğer hemen typescript yazmaya başlamak isterseniz, makalenin kurulum adımını geçerek, <a href="https://codepen.io/">Codepen</a>’i veya Typescript’in kendi dokümantasyon sayfasındaki <a href="https://www.typescriptlang.org/">Playground</a>’ı kullanabilirsiniz.</p>n<h3>Typescript Kurulumu</h3>n<p>Typescript’i kurabilmek için ilk başta bilgisayarımızda <a href="https://nodejs.org/en/">Node Js</a>’in kurulu olması gerekiyor. Ardından terminal üzerinden,</p>n<pre>npm install -g typescript</pre>n<p>komutunu çalıştıralım.</p>n<p>Şimdi örnek olarak, terminal üzerinden typescript yazmak istediğimiz dizine ilerleyerek, dizinimizde bir <strong>main.ts </strong>oluşturalım ve içerisine,</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/556/1*oOnjxB0OGhrsOgEXy8v0mw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/typescript-kurulumu/main.ts">main.ts</a></figcaption></figure><p>bu kodları yazalım.</p>n<p>Ardından,</p>n<pre>tsc main.ts -w</pre>n<p>komutunu terminalde çalıştıralım.</p>n<p>Bu komut ile ana dizinimde bulunan <strong>main.ts</strong> dosyası javascript’e dönüştürülerek, ana dizine çıktılandı ve ana dizindeki <strong>main.js </strong>dosyasının içeriği,</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/456/1*cCS83D3i4IIgmKi-GDXDmg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/typescript-kurulumu/main.js">main.js</a></figcaption></figure><p>bu şekilde oldu.</p>n<blockquote>n<strong>-w</strong> parametresi main.ts dosyasıdaki değişikliklerin anlık olarak izleneceği ve dosya içerisindeki kodların anlık olarak main.js dosyasına çıktılanacağı anlamına gelir. Zorunlu bir parametre değildir.</blockquote>n<p>Bu sayede ilk typescript kodumuzu yazmış ve derlemiş olduk. 🙂</p>n<h3>Yapılandırma (Configuration) ve Klasör Yapısı</h3>n<p>Terminalde,</p>n<pre>tsc --init</pre>n<p>komutunu çalıştırdıktan sonra. dizinimizde <strong>tsconfig.json </strong>dosyası oluşacaktır. Dizinizimde oluşan config dosyasındaki parametreleri düzenleyerek örnek bir klasör yapısı oluşturalım.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AiKdv8E3EJrb-BM7e6co-Q.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/yapilandirma-configuration-ve-klasor-yapisi/tsconfig.json">tsconfig.json</a></figcaption></figure><p>Bu yapılandırma dosyasına göre, <strong>src </strong>dizini içerisinde yer alan<strong> .ts</strong> dosyalarımız <strong>dist </strong>dizinine çıktılanacaktır.</p>n<h3>Statik Veri Tiplemesi (Static Type Checking) Nedir?</h3>n<p>Typescript ile değişkenler, fonksiyonlar, ve fonksiyon parametreleri için <strong>tip kontrolü (type checking)</strong> yapabilirsiniz.</p>n<h4>Özellikleri</h4>n<p>★ Tamamen isteğe bağlıdır.</p>n<p>★ Hataları bulmanıza ve önlemenize yardımcı olur.</p>n<p>★ Daha açıklayıcı ve okunaklı kod yazmanızı sağlar.</p>n<h3>Tipler</h3>n<p>★ <strong>String: </strong>Metinsel veri türleri için kullanılır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/666/1*5OprU4uC9LrJXy6tMVwXfw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/string.ts">string.ts</a></figcaption></figure><p>★ <strong>Number: </strong>Sayısal veri türleri için kullanılır. ES6 ile gelen ikili ve sekizli değerleri de destekler.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/698/1*tVdEEpmEDGUr40JRct2wAw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/number.ts">number.ts</a></figcaption></figure><p>★ <strong>Boolean: </strong>true/false değerler için kullanılır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/734/1*ueaEdEtnQqrvWddO_BoIWA.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/boolean.ts">boolean.ts</a></figcaption></figure><p>★ <strong>Array: </strong>Dizi tanımlamaları için kullanılır. İki farklı yazım şekli vardır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/888/1*zk2rzKnBARtT4AXZZRrSyQ.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/array.ts">array.ts</a></figcaption></figure><p>★ <strong>Any: </strong>Bilinmeyen değişken tipleri için kullanılır. Örneğin, dinamik değerler içeren değişkenler için kullanılabilir.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*lyn1g-lRMDNX54uEOhUqdg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/any.ts">any.ts</a></figcaption></figure><p>★ <strong>Void: </strong>Geriye herhangi bir değer <strong>return</strong> etmeyen fonksiyonlarda ve <strong>null</strong> veya <strong>undefined </strong>değer içeren değişkenlerde kullanılır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*10VYRj5ZK1TtVFDOL3T9kA.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/void.ts">void.ts</a></figcaption></figure><p>★ <strong>Null: </strong>null<strong> </strong>değer içeren değişkenlerde kullanılır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/574/1*bcK30V9s3SyOptXzVTCN7w.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/null.ts">null.ts</a></figcaption></figure><p>★ <strong>Undefined: </strong>undefined<strong> </strong>değer içeren değişkenlerde kullanılır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/810/1*eFdkVUOz_LGSBHa9OorA_Q.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/undefined.ts">undefined.ts</a></figcaption></figure><p>★ <strong>Tuple: </strong>Grup türleri bilinen ancak aynı olması gerekmeyen dizilerde kullanılır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/846/1*rsz6lblfyIrzHzC4hncp8Q.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/tuple.ts">tuple.ts</a></figcaption></figure><p>★ <strong>Enum: </strong>Obje içerisindeki key’lere veya key değerlerine daha kolay erişmek için kullanılır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/768/1*7Oc6M8lT-Y2SkVTONEpsrg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/enum/enum-1.ts">enum-1.ts</a></figcaption></figure><p>Key değerleri, <strong>varsayılan olarak 0'dan başlar</strong> ancak bunu değiştirmek mümkündür.</p>n<p>Tek bir key’in değerini veya birden fazla key’in değerini değiştirebiliriz. 👌💪</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1020/1*hq2NWx3EozsjqP0ZcH9Kig.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/enum/enum-2.ts">enum-2.ts</a></figcaption></figure><p>Key’lere erişmek için indis numarasını yazmamız yeterli. 😋</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/842/1*uKJ_psMseqWPwsU5mbDakw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/temel-tipler/enum/enum-3.ts">enum-3.ts</a></figcaption></figure><h3>Takma Adlar (Type Alias)</h3>n<p><strong>type </strong>sözcüğü ile tanımlanan ifadeler, tipleri içerisinde tutar ve bu tipleri birden fazla yerde kullanmamıza olanak tanır. 👌</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0ViwhQ4CqpOUfulf4XK0TQ.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/alias/alias.ts">alias.ts</a></figcaption></figure><p>Yukarıdaki örnekte yer alan <strong>user </strong>alias’ı hem <strong>string</strong> tipindeki değişkenleri hem de <strong>object </strong>tipindeki değişkenler için tip kontrolünü sağlar.</p>n<h3>Fonskiyonlar</h3>n<p>★ <strong>Void: </strong>Geriye herhangi bir değer <strong>return</strong> etmeyen fonksiyonlarda kullanılır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*86GKkerviGtnVOUFQs4O5w.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/fonksiyonlar/void.ts">void.ts</a></figcaption></figure><p>★ <strong>Geriye Değer Döndürebilen Fonksiyonlar:</strong></p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*KzF3Mc3x8l5IQwayERp3Gg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/fonksiyonlar/object.ts">object.ts</a></figcaption></figure><p>Yukarıdaki örnek, <strong>object </strong>tipinde parametre alan ve geriye <strong>string </strong>tipinde değer döndüren bir fonksiyon kullanım örneğidir.</p>n<p>★ <strong>Parametresi Zorunlu (Required) Olmayan Fonksiyonlar:</strong></p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YbPR6IjZu9ky5-iZJ5eFaQ.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/fonksiyonlar/parameters.ts">parameters.ts</a></figcaption></figure><p>Yukarıdaki örnekte, <strong>action </strong>parametresi ve user objesi içinde gönderilen <strong>age </strong>anahtar kelimesi, zorunlu bir parametre değildir. Fonksiyon çalıştırıldığında bu parametreler gönderilmemiş durumsaysa bu kısım işleme alınmaz.</p>n<h3>Sınıf Tabanlı Objeler (Class Based Object)</h3>n<h4>Sınıflar (Classes)</h4>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CxpirPjY83DufrkIITh-gg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/classlar/classlar.ts">classlar.ts</a></figcaption></figure><p>Yukarıdaki örnektede gördüğümüz üzere, sınıf içerisinde yapılan<strong> değişken tipi tanımlamaları </strong>ve method içerisine gönderilen<strong> parametrelerin tip tanımlamaları</strong>, değişkenler ve fonksiyonlardaki ile <strong>aynıdır</strong>.</p>n<h4>Soyut Sınıflar (Abstract Classes)</h4>n<p>Soyut sınıflar,</p>n<p>★ Kendi instance objesinden türeyemeyen sınıflardır.</p>n<p>★ Kendisini kullanan başka sınıfların instance’ları aracılığıyla içerisindeki özelliklere erişilmesini sağlayan sınıflardır.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RJj5a-NEbQokaGJ-d7p1Sw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/classlar/abstract-class-1.ts">abstract-class-1.ts</a></figcaption></figure><p>Eğer soyut bir sınıftan instance üretmeye çalışırsak, hata alırız.</p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AbpTIbm2TfCQed6f7wOD6A.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/classlar/abstract-class-2.ts">abstract-class-2.ts</a></figcaption></figure><p>Yukarıdaki örnekte, Person sınıfı instance’ından türetilen obje ile <strong>hem Person</strong> sınıfı içindeki parametrelere <strong>hem de</strong> <strong>User</strong> sınıfı içindeki parametrelere erişilebilir.</p>n<h3>Interface</h3>n<p>Dışarıdan erişilebilir durumda olan elemanları, objelere veya sınıflara bildiren yapılardır.</p>n<p>★ Birbirlerinden extend olabilirler.</p>n<p>★ Birbirlerinden implement olamazlar.</p>n<p>★ Objelere ve sınıflara atanabilirler.</p>n<h4><strong>Objelerde Kullanımı</strong></h4>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/758/1*s7esBzbHoAXhVqXxy2qw8w.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/interface/with-object.ts">with-object.ts</a></figcaption></figure><p>Yukarıdaki örnekte, <strong>age </strong>değeri obje içerisinde kullanımı zorunlu bir parametre olmadığı için <strong>soru işareti (?) </strong>ile birlikte kullanılmıştır.</p>n<h4><strong>Sınıflarda Kullanımı</strong></h4>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ls9hK9q39OJlyOyy5T0VRw.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/interface/with-class.ts">with-class.ts</a></figcaption></figure><p>Yukarıdaki örnekte, User sınıfı, <strong>IsPerson </strong>Interface’i içinde tanımlanmış olan özellikleri kullanmaktadır.</p>n<h3>“public”, “private” ve “readonly”</h3>n<p>★ <strong>public: </strong>Sınıf içerisinde kullanılan özellikleri dışarıdan <strong>erişilebilir </strong>ve<strong> değiştirilebilir </strong>hale getirir.</p>n<p>★ <strong>private: </strong>Sınıf içerisinde kullanılan özelliklerin dışarıdan<strong> erişilebilme </strong>ve <strong>değiştirilebilme </strong>durumunu<strong> devre dışı</strong> bırakır.</p>n<p>★ <strong>readonly: </strong>Sınıf veya Interface içerisinde kullanılan özelliklerin dışarıdan <strong>değiştirilebilme</strong> durumunu devre dışı bırakır.</p>n<p><strong>Interface’lerde Kullanımı</strong></p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*90dOiR9etTVLmY-bR6_vLg.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/public-private-readonly/read-only-with-interface.ts">read-only-with-interface.ts</a></figcaption></figure><p><strong>Sınıflarda Kullanımı</strong></p>n<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*iFv2O3zffx0PJBHlMPKonQ.png"><figcaption>Dosya Linki: <a href="https://github.com/yasinatesim/medium-stories/blob/master/02-a-dan-z-ye-typescript/public-private-readonly/read-only-with-class.ts">read-only-with-class.ts</a></figcaption></figure><p>Sınıf veya obje içerisindeki <strong>readonly</strong> değerleri değiştirmeye çalışırsak, hata alırız.</p>n<h3>Sonuç</h3>n<p>Javascript diline katı kurallar eklememize yardımcı olan Typescript, ilk başlarda göze biraz tuhaf gözükse de alıştıktan sonra geliştirme esnasında karşımıza çıkardığı hata mesajlarıyla hayatımızı kolaylaştırıyor.</p>n<p>Bu makalede kullandığım resimlere ve paylaşmış olduğum kaynak kodlara, makale içerisinde bırakmış olduğum resimlerin altındaki linkler üzerinden ulaşabilirsiniz.</p>n<p>Bu linklerin tamamını görüntülemek için: <a href="https://github.com/yasinatesim/medium-stories/tree/master/02-a-dan-z-ye-typescript">https://github.com/yasinatesim/medium-stories/tree/master/02-a-dan-z-ye-typescript</a></p>n<p>linkini takip edebilirsiniz.</p>n<p>Makaleyi hazırlarken kullandığım kaynaklar;</p>n<p>Typescript Documentation: <a href="https://www.typescriptlang.org/">https://typescriptlang.org</a></p>n<p>The Net Ninja: <a href="https://www.youtube.com/watch?v=2pZmKW9-I_k&amp;list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI">https://www.youtube.com/watch?v=2pZmKW9-I_k&amp;list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI</a></p>n<p>Traversy Media: <a href="https://www.youtube.com/watch?v=rAy_3SIqT-E">https://www.youtube.com/watch?v=rAy_3SIqT-E</a></p>n<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d27a1b6ff17a" width="1" height="1">n",
      "source_website": "medium"
    },
    {
      "id": "360103",
      "title": "yasinates.com is coming soon 😋",
      "thumbnail": "https://res.cloudinary.com/practicaldev/image/fetch/s--1T-3gRGP--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--dR_DndOD--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/i/xk5a6aaf0vqi555egtxg.jpg",
      "description": "Hello everyone 😀, this is my first post.   I will share the English of my articles on medium.com here...",
      "content": "<p>Hello everyone 😀, this is my first post. </p>nn<p>I will share the English of my articles on <a href="https://medium.com/@yasinatesim/">medium.com</a> here.</p>nn<p>I create the data on my website using the DEV API, medium.com API, and Github API services 😎</p>nn<p>I will write my next article is about the publishing process of my website.</p>nn<p>Hope to see you in new articles. 👋 👋</p>nn<p>My medium profile: <a href="https://medium.com/@yasinatesim/">medium.com/@yasinatesim/</a></p>nn<p>My personal website: <a href="http://yasinates.com/">yasinates.com</a></p>nn",
      "source_website": "dev"
    }
  ]
}

I tried these but I couldn’t solve the issue 🙁

• https://flaviocopes.com/react-fix-dangerouslysetinnerhtml-did-not-match/
• https://github.com/vercel/next.js/issues/7660
• https://github.com/facebook/react/issues/12415

Edit:

Resolved 🙂

The last

<img src=" ... "width ="1" height="1">

on the medium API.

content.replace(/<img(.*?)(width="1")(.*?)>/, '')

Thanks.