Semantic JavaScriptが動かない Next.js

Question

下記コードでなぜか、SemanticのJavaScriptが動きません。。。
どうしてでしょうか。。

test.js

import { Modal, Button, Icon } from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css'

export default function(){
    return (
      <div>  

      <script type="text/javascript">
      $('.shape')
        .shape('flip up')
        ;
      </script>

      <div class="ui shape">
  <div class="sides">
    <div class="active side">This side starts visible.</div>
    <div class="side">This is yet another side</div>
    <div class="side">This is the last side</div>
  </div>
</div>


<div class="ui ignored icon direction buttons">
        <div class="ui button" data-animation="flip" title="Flip Left" data-direction="left"><i class="left long arrow icon"></i></div>
        <div class="ui button" data-animation="flip" title="Flip Up" data-direction="up"><i class="up long arrow icon"></i></div>
        <div class="ui icon button" data-animation="flip" title="Flip Down" data-direction="down"><i class="down long arrow icon"></i></div>
        <div class="ui icon button" data-animation="flip" title="Flip Right" data-direction="right"><i class="right long arrow icon"></i></div>
      </div>
      <div class="ui ignored icon direction buttons">
        <div class="ui button" title="Flip Over" data-animation="flip" data-direction="over"><i class="retweet icon"></i></div>
        <div class="ui button" title="Flip Back" data-animation="flip" data-direction="back"><i class="flipped retweet icon"></i></div>
      </div>



</div>
    )
}

##参考にしたPage
https://semantic-ui.com/modules/shape.html#/usage

Comments

[hoshi-takanori]

semantic-ui-react は jQuery Free つまり jQuery は使えないのでは…。
https://react.semantic-ui.com/

[K_3578]

質問と関係ありませんが、謎に更新し続けられている下記の怪文書はなんですか？
必要ないのなら削除リクエストを送ってください。teratailの質問は備忘録に使う物では
ありません。
https://teratail.com/questions/274851
https://teratail.com/questions/274853