何をするか？
Next.js アプリから、CSS フレームワークの Bootstrap を使えるようにする方法を説明します。
- Bootstrap を導入
- 各コンポーネントの実装で、Bootstrap の CSS クラスを参照できるようにします
- React Bootstrap を導入
- Bootstrap を React コンポーネントの形で使えるようにします
Bootstrap を導入する
bootstrap モジュールをインストールする方法
Bootstrap は npm install で簡単にインストールできます。
$ npm install bootstrap@next --saveあとは、次のような pages/_app.tsx ファイルを作成して、グローバル CSS としてインポートすれば OK です。
import type { AppProps } from 'next/app'
import 'bootstrap/dist/css/bootstrap.min.css'
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}これで、各ページコンポーネントから Bootstrap の CSS クラスを参照できるようになります。
CDN 上のファイルを参照する方法
CDN 上で公開されている Bootstrap ファイルを参照することもできます。
pages/_app.tsx ファイルを作成して、次のように Bootstrap の CSS ファイルを読み込みます。
これで、各ページの head 要素内に link 要素が追加されます。
import type { AppProps } from 'next/app'
import Head from 'next/head'
export default function MyApp({ Component, pageProps }: AppProps) {
return <>
<Head>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossOrigin="anonymous">
</link>
</Head>
<Component {...pageProps} />
</>
}最新の CDN アドレスは、Bootstrap のサイト で確認してください。
一点注意なのは、JSX では crossorigin 属性は crossOrigin のように O を大文字にしないといけないというところです。
Bootstrap の高度なコンポーネントを使うときは、JavaScript ファイルも必要なことがあります。
その場合は、Component 要素の後ろあたりに script 要素を追加すれば OK です。
動作確認
適当なページコンポーネントで、Bootstrap の CSS クラスを参照できれば成功です。 例えば、以下のように btn クラスを適用したボタン を表示すれば、うまく適用できているか分かります。
const Home: React.FC = () => {
return <>
<button type="button" className="btn btn-primary">Primary</button>{' '}
<button type="button" className="btn btn-secondary">Secondary</button>{' '}
<button type="button" className="btn btn-danger">Danger</button>
</>
}
export default HomeReact Bootstrap を導入する
react-bootstrap のインストール
React Bootstrap を導入すると、Bootstrap の CSS が適用された React コンポーネントを使えるようになります。 Bootstrap 本体の方は、前述の方法で導入しておく必要があります。
$ npm install react-bootstrap --save動作確認
次の例では、React Bootstrap の Button コンポーネント を使用しています。 Bootstrap の CSS クラスをそのまま使うよりは、若干シンプルに記述できるようになっています。
import Button from 'react-bootstrap/Button';
const Home: React.FC = () => {
return <>
<Button variant="primary">Primary</Button>{' '}
<Button variant="secondary">Secondary</Button>{' '}
<Button variant="danger">Danger</Button>
</>
}
export default Home