Next.js, bootstrap modal(モーダル)　起動の手順

---

概要:

Next.js + typescriptで、bootstrap のimport 難航した為、対策メモです

• bootstrap公式の方法で、JS modal　起動が難しいようでした

---

構成

• next.js 12

---

関連

• https://getbootstrap.com/docs/5.0/components/modal/

---

実装

• modal
  id = open_buttonは、CSSで隠しておきます

ModalPost.tsx

import Link from 'next/link';
//Types
interface IProps {
  id: number,
}

/**
* IndexRow
* @param
*
* @return
*/
const ModalPost: React.FC<IProps> = function (props: any) {
  return (
    <div className="row justify-content-center"> 
      {/* button */}
      <button type="button" id="open_button" className="btn btn-primary"
       data-bs-toggle="modal" data-bs-target="#exampleModal">
        Launch demo modal
      </button>
      {/* Modal */}
      <div className="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel"
	      aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close
              </button>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        #open_button { display: none ;}
      `}</style>              
    </div>
  )
}
;
export default ModalPost;

• 呼出し

• modal　コンポーネント の、Id = open_button を指定

• click　イベントを発火

• modal 開きます

show.tsx

  const parentShow = async function (id: number) 
  {
    try {
console.log("parentShow", id);
      const btn = document.getElementById("open_button");
      btn?.click();
    } catch (e) {
      console.log(e);
      throw new Error('error, parentFunc');
    }
  }

---