実現したいこと

デザインを考えるセンスがないため、フロントサイドは極力デザインテンプレートを使いたいです。
next.jsでbootstrapのテンプレートを使用したいです。

発生している問題

例えば下記サイトのbootstrapテンプレートをnext.jsで使う場合のやり方が分かりません。

https://startbootstrap.com/theme/one-page-wonder

例えばアイコン等はCDNや他のサーバーを経由せずなるべくサーバー内を参照するようにしたいです。
参照先の設定方法等が分かりません。

ソースコード

自分で試したこと

react-bootstrapのインストールを行い、使えるようにしました。

npm install react-bootstrap bootstrap

pages/_app.js

import '../styles/globals.css' 
import 'bootstrap/dist/css/bootstrap.min.css'; //追加
import { useEffect } from "react"; //追加

function MyApp({ Component, pageProps }) {

  useEffect(() => {
    import("bootstrap/dist/js/bootstrap"); //追加
  }, []);

  return <Component {...pageProps} />
}

export default MyApp

これでbootstrapが使えるようになりました。
この後サイトからダウンロードしたデザインテンプレートを適用したいのですが、やり方が分かりません。

補足情報