ReactのSSRフレームワーク”Next.js”で、Bootstrapを使う方法を書いておきます。

React Bootstrapのインストール

React用のBootstrapとして、その名も “React Bootstrap“ がありますので、これを使います。

1
npm install react-bootstrap bootstrap

CSSの読み込み

React BootstrapにCSSは入っていないので、別途CSSを適用する必要があります。
今回は、通常のBootstrapのものを使うことにします。

Next.jsでCSSファイルを適用するために@zeit/next-cssをインストールします。

1
npm install --save @zeit/next-css

次に、CSSファイルを使うためBootstrap自体もインストールします。

1
npm install bootstrap --save

準備ができたので、設定ファイルを書き換えとCSSを読み込みます。

1
2
3
4
5
6
// next.config.js
const withCSS = require('@zeit/next-css')

module.exports = withCSS({ // 設定を"withCSS"に渡す
    // 各種設定
});
1
2
// pages/index.js
import 'bootstrap/dist/css/bootstrap.min.css';

Bootstrapを使う

例えばBootstrapのボタンを使いたい場合は、次のように書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 使いたいコンポーネントをimportする
import Button from "react-bootstrap/Button";

const IndexPage: NextPage = () => {
  return (
    <Layout title="Home | Next.js + TypeScript Example">
      <h1>Hello Next.js 👋</h1>
      <p>
        <Link href="/about">
          <a>About</a>
        </Link>
        <Button>test</Button>  ←こんな感じで使える!
      </p>
    </Layout>
  )
}

まとめ

Next.jsでも簡単にBootstrapを使えますので、ぜひ使ってみてください。