
最小の Next.js + Bootstrapアプリを作成する
サーバーサイド寄りのエンジニアが管理画面をちゃちゃっと作るために最小限の Next.jsプロジェクトを作成する手順をまとめた
2023年2月5日 嶋田大貴
口上
何らかのサービスの管理画面的な物を作る。Next.jsというのを使ってみたい。でもフロントエンドのことは正直わからんし苦労して追いついてもどうせまた置いて行かれるのでなるべく Bootstrapの知識だけでなんとか切り抜けたい。
ファイル構成
自分で作る最小限のファイルは下記の通り。
- package.json
- .gitignore
- pages/
- index.tsx
- _app.tsx
- _document.tsx
その他、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
各モジュールの雑な紹介
- Next.js - フロントエンドにReactを使ったWebアプリケーションフレームワーク
- Bootstrap - 管理画面作りマン用CSS
- React Bootstrap - Reactで Bootstrapを使うためのもの
- swr - サーバ側APIと通信するためのライブラリ
最小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するなどして運用しよう。
その他情報
- ページ内で使用するプロパティをサーバ側で収集するにはそのページのソースで getServerSideProps という関数を exportする
記事へのコメントは Twitterにお願いします。
2023年2月5日 嶋田大貴