Zenn
💬

Next.jsにbootstrapを導入する方法

2021/03/31に公開
Bootstrap
JavaScript
Next.js
tech

はじめに

Next.jsにbootstrapを適応させる方法をまとめます。
※ bootstrap5について記述しています。

bootstrap 公式

https://getbootstrap.jp/docs/5.0/getting-started/download/

１つ目の方法

1. パッケージをインストール

$ npm install bootstrap@next
or
$ yarn add bootstrap@next

2. bootstrapのcssを適応させる

適応させたいページにimport 'bootstrap/dist/css/bootstrap.min.css'を指定します

_app.js
import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

3.公式に沿ってクラスを指定する

２つ目の方法

1. CDNをコピー

bootstrapの公式からCDNをコピーします
Getting started > Download > jsDelivr 経由の CDN

<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">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

2. CDNをHEADの中に指定する

_app.js
import Head from "next/head";
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
//  bootstrap CDN
<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" 
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;

Discussion