emotion で The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".

Next.jsとemotionで次のようなエラーがでた

The pseudo class ":nth-child" is potentially unsafe when doing server-side rendering. Try changing it to ":nth-of-type".

:nth-child はSSRでundafeらしい。なんでたかが:nth-childがunsafeなの？と思ったけどどうやら

• https://github.com/emotion-js/emotion/issues/1178

このissueをみてるかんじ、兄要素として <style> が挿入されることがあるそうな。解決策については

• https://emotion.sh/docs/ssr

公式のドキュメントのSSRのページにのっています

SSRではない場合、このエラーを非表示にしたい事はあると思うんだけど

• https://github.com/emotion-js/emotion/pull/1209#issuecomment-462035404

この記述が必要らしい

span:nth-child(2) /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
  animation-delay: 0.2s;
}
span:nth-child(4) /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
  animation-delay: 0.4s;
}

うーん、流石にちょっとこれは普通につけられるのであれば、クラスつけたほうがいいんじゃない？となっちゃいますね……