Native React の環境では、一つのページ（URL）の中でNutanixクラスタへ接続、検索、結果表示を行う、SPA（シングルページアプリケーション）でのカタチで作ってました
今回はなんとなく、それぞれ別にページを作っていきます
【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓
・ログインページをデザイン ←イマココ
・フォーム制御
・とりあえずFetch
・FetchからRouterでページ遷移
・SSR で Fetch する
・Layoutつくる
今回の成果物
今回の最終形態はコチラ(Github)で公開しています
ページ設計
まともにWebサイトとか作ったことないので、どうやって設計するもんなんかはわかりませんが。。。
ページ設計としてはこんな感じで作ってみようかと
ログインページのベースデザイン
それっぽいログインページ風なものを作ってみます
（一旦色は無視）
画像の表示
表示する画像は、"public"配下に置いて
import Image from 'next/image'
<Image src="/uuid-xplorer_logo.png" alt="uuid xplorer logo" width={494} height={80} />width, heightを両方指定しなければいけないのが、ちょっとメンドイ
フォーム
フォームには、daisyUI の Text Input をベースに使います
Text Input — Tailwind CSS Components
<input type="text" placeholder="Type here" className="input input-info" />
これだけでカタチになってくれるのは楽チン
ここから先は、tailwindcssも駆使しながらイメージしたデザインを作っていきます
＜pages/index.tsx＞
import type { NextPage } from 'next' import Head from 'next/head' import Image from 'next/image' //fontawesome import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons' const Index: NextPage = () => { return ( <div className=""> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <main data-theme="white" className="flex text-center items-center h-screen"> <div className='w-1/2'> <div className='m-10'><Image src="/uuid-xplorer_logo.png" alt="uuid xplorer logo" width={494} height={80} /></div> </div> <div className="w-1/2 bg-primary h-screen flex justify-center items-center flex flex-col"> <div className="form-control mt-20"> <form > <div className='flex flex-col'> <input type="text" placeholder="Cluster IP" className="input input-info input-bordered m-1 w-64 text-lg" /> <input type="text" placeholder="username" className="input input-info input-bordered m-1 w-64 text-lg" /> <div className='m-1 relative'> <input type="password" placeholder="Password" className="input input-info input-bordered w-64 text-lg" /> <button type="submit" className="absolute inset-y-2 right-2 opacity-20 hover:opacity-100"><FontAwesomeIcon icon={faArrowCircleRight} size="2x" /></button> </div> </div> </form> </div> </div> </main> <footer className="text-center text-sm">Copyright (C) konchangakita. All Rights Reserved.</footer> </div> ) } export default Index
daisy UIを使ったテーマカラーの設定
daisyUI のテーマカラーを変更して、
・Primary を Nutanixのブルーに近いに色
・info をフォームの枠の色もぽいブルーに
・base をボタンのマウスオーバー用に
に設定してみます
daisyUI Theme Generator — Tailwind CSS Components
＜tailwind.config.js＞
module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [ require('daisyui'), ], daisyui: { themes: [ { 'mytheme': { 'primary': '#21509e', 'base-100': '#ffffff', 'base-200': '#f9fafb', 'base-300': '#d1d5db', 'base-content': '#1f2937', 'info': '#2094f3', }, }, ], } }
ぽい色になった気がします
ここまで
今回は一旦簡単なデザインまで
フォーム制御、Fetch（SSR）につづく
