Zenn
📑

Nextjs + Bootstrap を試す最小の手順とコード (create-next-app / App Router を使用)

2023/07/29に公開
Bootstrap
Next.js
React
tech

主旨

Nextjs で bootstrap5 をできるかぎり少ない手順とコードで試す方法についての記事です。

前提として yarn create next-app または npx create-next-app でアプリを作成し、App Router を使用する選択をします。そして、自動生成されたファイルをなるべくそのまま使います。

2023/7 時点での記事ですが、nextjs 周りの変更がいろいろとあるようなので、少し時間がたつと以下の通りではできなくなっている可能性があります。

バージョンなど

Windows11 (WSL2) と macOS の両方で動作を確認しました。

$ node -v
16.16.0
$ yarn -v
1.22.19
  • bootstrap: 5.3.1
  • create-next-app: 13.4.12
  • next: 13.4.12
  • react: 18.2.0
  • react-dom: 18.2.0

JavaScript を使う場合

アプリの作成

nextjs については公式にある通りです。bootstrap については yarn add bootstrap または npm install bootstrap でインストールします。

$ npx create next-app@latest

✔ What is your project named? … next-bootstrap-test
✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No

$ cd next-bootstrap-test
$ yarn add bootstrap

コード

app 以下のファイルを、下記だけ残してあとは消します。

$ tree app
app
├── favicon.ico
├── layout.js
└── page.js

layout.js

デフォルトで生成されたファイルに import 'bootstrap/dist/css/bootstrap.min.css' を追加します。

import { Inter } from 'next/font/google'
import 'bootstrap/dist/css/bootstrap.min.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

page.js

下記のように書き換えます。

export default function Home() {
  return (
    <div type="button" className="btn btn-primary">
      Push!
    </div>
  )
}

実行

yarn dev または npm run dev としてから、ブラウザで localhost:8000 にアクセスします。

push

上記のようなボタンが表示されたら成功です。

React Bootstrap

JavaScript で Bootstrap を使うアプリを作成する手順をすべて行った上で、アプリのフォルダで下記を実行します。

$ yarn add react-bootstrap bootstrap
# または
$ npm install react-bootstrap bootstrap

laytout.js を下記のように書き換えます。

import { Inter } from 'next/font/google'
import 'bootstrap/dist/css/bootstrap.min.css'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

page.js を下記のように書き換えます。

import { Button } from 'react-bootstrap';

export default function Home() {
  return (
    <Button variant="primary">
      Push!
    </Button>
  )
}

これで yarn dev してからブラウザで確認します。

push

上記のようなボタンが表示されたら成功です。

TypeScript の場合

JavaScript の場合とほとんど同じです。

アプリの作成

nextjs については公式にある通りです。bootstrap については yarn add bootstrap または npm install bootstrap でインストールします。

$ npx create-next-app

✔ What is your project named? … next-typescript-bootstrap
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No

Creating a new Next.js app in next-typescript-bootstrap.

$ cd next-typescript-bootstrap
$ yarn add bootstrap

コード

app 以下のファイルを、下記だけ残してあとは消します。

$ tree app
app
├── favicon.ico
├── layout.tsx
└── page.tsx

layout.tsx

デフォルトで生成されたファイルに import 'bootstrap/dist/css/bootstrap.min.css' を追加します。

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import 'bootstrap/dist/css/bootstrap.min.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

page.tsx

下記のように書き換えます。

export default function Home() {
  return (
    <div type="button" className="btn btn-primary">
      Push!
    </div>
  )
}

実行

yarn dev または npm run dev としてから、ブラウザで localhost:8000 にアクセスします。

push

上記のようなボタンが表示されたら成功です。

React Bootstrap

TypeScript で Bootstrap を使う手順を実行した上で、下記も実行します。

$ yarn add react-bootstrap

layout.tsx を下記のように書き換えます。

import { Inter } from 'next/font/google'
import 'bootstrap/dist/css/bootstrap.min.css'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

page.tsx を下記のように書き換えます。

"use client"
import { Button } from 'react-bootstrap';

export default function Home() {
  return (
    <Button variant="primary">
      Push!
    </Button>
  )
}

yarn dev または npm run dev としてから、ブラウザで localhost:8000 にアクセスします。

push

上記のようなボタンが表示されたら成功です。

Hot Reload

Hot Reload がうまくいかない場合は下記を参照のこと。

Discussion