最小の Next.js + Bootstrapアプリを作成する

サーバーサイド寄りのエンジニアが管理画面をちゃちゃっと作るために最小限の Next.jsプロジェクトを作成する手順をまとめた

2023年2月5日 嶋田大貴

口上

何らかのサービスの管理画面的な物を作る。Next.jsというのを使ってみたい。でもフロントエンドのことは正直わからんし苦労して追いついてもどうせまた置いて行かれるのでなるべく Bootstrapの知識だけでなんとか切り抜けたい。

ファイル構成

自分で作る最小限のファイルは下記の通り。

その他、favicon.ico や画像などの静的リソースは public 以下、スタイルシートは styles 以下に配置する。

package.jsonファイルの作成

{
    "scripts":{
        "dev":"next dev",
        "build":"next build",
        "start":"next start"
    },
    "dependencies":{
    },
    "devDependencies":{
    }
}

.gitignore ファイルの作成

/.vscode
/node_modules
/.next/
next-env.d.ts

npmモジュールのインストール

npm install --save next bootstrap react-bootstrap swr

各モジュールの雑な紹介

最小Webアプリの作成

mkdir pages

pages/_app.tsx

ここで bootstrap.min.cssをインポートしておくとすべてのページで Bootstrapのスタイルが使えるようになる。 公式ドキュメント(Custom App)

import type { AppProps } from 'next/app'
import Head from 'next/head'
import 'bootstrap/dist/css/bootstrap.min.css'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <>
    <Head>
      <title>default title here</title>
    </Head>
    <Component {...pageProps} />
  </>
}

pages/_document.tsx

すべてのページに共通の「外枠」をここでカスタマイズできる。 Custom Document

ただしここでは Headの中に titleを入れられないので代わりに _app.tsxのほうに入れること

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="ja">
      <Head />
      <body>
        <div className="container">
            <Main />
        </div>
        <NextScript />
      </body>
    </Html>
  )
}

pages/index.tsx

トップページを表現する tsx

import Head from 'next/head'
import { Button } from 'react-bootstrap';

export default function Home() {
  return <>
    <Head>
      <title>My next.js + bootstrap webapp</title>
    </Head>
    <main>
      <h1>Hello, World!</h1>
      <Button>ボタンです</Button>
    </main>
  </>
}

実行

開発モードでの実行

npm run dev

3000番ポートで HTTPアクセスできる。ソースに対して変更を行うとブラウザ側も自動でリロードしてくれるなど大変親切。

ビルドしてプロダクションモードで実行

npm run build
npm run start

3000番ポートで HTTPアクセスできる。nginxなどのWebサーバを前面に置いてリバースProxyするなどして運用しよう。

その他情報

2023年2月5日 嶋田大貴

記事一覧へ戻る