【Nutanix UUIDエクスプローラーを作ってみよう】Next.js で導入

React を CDN でぼちぼちJavaScriptしてきましたが、ここからフロントエンド部分を独立させ大きく開発環境を進化させます
フロントエンドのコンテナを別に作り、Reactベースのフロントエンドフレームワークの Next.js を導入していきます

【Nutanix UUIDエクスプローラーを作ってみよう】シリーズ
・REST API 〜 Flask表示
・React で JavaScript 挑戦シリーズ

【Next.j 特訓】
・Next.js で導入←イマココ
・Next.js環境に tailwindcss/ DaisyUI/ Font Awesomeを導入
・ログインページをデザイン
・フォームの実装
・とりあえずFetchする
・FetchからRouterでページ遷移
・SSR で Fetch する
・Layout を作る

今回の成果物

今回の最終形態はコチラ(Github)で公開しています
＜フォルダ構造＞

Next.js 用のコンテナの準備

とりあえず nodeベースでコンテナを作ります
これだけでOK
＜dockerfile＞

FROM node:latest
WORKDIR /usr/src/next-app/

Next.jsの導入

Next.js 日本語翻訳プロジェクトを参考にしながら、インストールしてみます

nodeバージョン確認

# node -v
v17.2.0

Next.js プロジェクト作成

プロジェクト名を指定しuuid-xplorerすることで、プロジェクト名のディレクトリが作成されて、必要なファイルたちが設置されます
今回はTypeScriptに挑戦したいので、--typescriptオプションをつけてインストールします

# npx create-next-app uuid-xplorer --typescript
Need to install the following packages:
  create-next-app
Ok to proceed? (y)

自動的に作られたGitリポ削除

プロジェクト作成時に、自動的に Git initされているので、
コンテナごとまるっとGithub管理を統一したいので、自動的に作成されたプロジェクト配下の .git を消しちゃいます

# cd uuid-xplorer
# rm -rf .git

ポイントnode_modules 配下に大量にファイルが作られるので、.gitignoreで github 管理対象からはずしておきます
nodeでインストールすると、node_modules に関連ファイルが設置されると共に package.json にインストールした情報が追記されるので、コンテナの作成時に npm install を実行することで package.json内を参照してインストールし、同じ環境を作ることができます

Next.js インストールしたての package.json

{
  "name": "uuid-xplorer",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.4",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.4",
    "typescript": "4.6.3"
  }
}

docker-composeはこんな風に書いておけば、次回からは楽チン

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: frontend
    ports:
      - "7778:3000"
    volumes:
    - ./frontend/next-app:/usr/src/next-app:z
    command: bash -c "cd /usr/src/next-app/uuid-xplorer
      && npm install
      && tail -f /dev/null"
    networks:
      - uuid

Fast Refreshの有効

Next.jsではコード編集すると、stateを維持したまま変更が即時反映されます
これはめっちゃ便利な機能で、コイツの有無で開発スピードは断然違います
webpackDevMiddleware: config～部分を追記です
next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpackDevMiddleware: config => {
    config.watchOptions = {
      poll: 800,
      aggregateTimeout: 300,
    }
    return config
  },
}

module.exports = nextConfig

Next.jsで起動

uuid-explorerフォルダで以下を実行します

# npm run dev

これでサンプルサイトにアクセスできます
デフォルトでは、http://localhost:3000/
（今回の docker-composeの環境では http://localhost:7778/ でアクセスできるようにしています）

このページの内容は、uuid-explorer/pages/配下の
　_app.tsx
　index.tsx
になります

index.tsx をシンプルに編集してみます

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        Welcome to UUID Xplorer
      </main>
    </div>
  )
}

export default Home