【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓 Layout を作る

SSR で Fetch して表示するデータはそろってきました

ここでページ移動しても共通で表示させる「ナビゲーションバー」を Layout コンポーネントを作ってみます

【Nutanix UUIDエクスプローラーを作ってみよう】Next.js特訓
・ログインページをデザイン
・フォーム制御
・とりあえずFetch
・FetchからRouterでページ遷移
・SSR で Fetch する
・Layoutつくる　←イマココ

準備

今回の最終形態はコチラ(Github)で公開しています

Layoutファイルの設置場所

Next.js のプロジェクト直下に「components」フォルダを作って、「layout.tsx」ファイルを作ります

Layoutの作成

まず初めに、tailwindcss のコンフィグファイルに Layoutファイルの場所を追記します

...
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
...

layout.tsx をまず {children} （ベースとなるページ）を表示するだけの空っぽ状態を作ってみます
＜components/layout.tsx＞

import type { NextPage } from 'next'

import { ReactElement } from 'react'

type LayoutProps = Required<{
  readonly children: ReactElement
}>

const Layout: NextPage<LayoutProps> = ({children}) => {

  return (
    <>
        {children}
    </>
  )
}

export default Layout

あとはレイアウトを使う側のページで、ファイルの場所をインポートし タグで挟んでやるだけです
＜pages/home.tsx＞

import Layout from '../components/layout'

    <Layout>
      ...
    </Layout>

ナビゲーションバーの実装

daisyUI の Navbar を参考に作ってみます
Navbar — Tailwind CSS Components

まだナビゲーションバーとしての役目は、まだ何もないですが、とりあえず見栄えだけ整えてみました
＜components/layout.tsx＞

＜pages/home.tsx＞

「http://localhost:7778/home?cluster_name=＜クラスタ名＞」
Elasticsearchからデータが取得できると一覧がドワーっと表示されます

うまくデータが取得できなかった時

さいごに

デザイン的には本当は CSS 使うのでしょうが、tailwindCSS と DaisyUI いれてるので、ほとんど使っていません
（きっともうちょっと大規模になれば必要かと）