microCMS × Next.js14(App Router)でブログ構築 4 ~レイアウト作成(Tailwind CSS)~

2024/06/10

2024/06/15

# Next.js

# microCMS

レイアウトのイメージ

レイアウトはPC, スマホでそれぞれ下のイメージで作っていきます。

PC

スマホ

メインコンテンツの箇所にブログ記事一覧やブログ記事詳細、サイドバーにカテゴリ、運営者情報などを表示していきます。
スマホの場合は画面が狭くなるのでサイドバーをメインコンテンツの下に来るように変更しています。

ヘッダーの作成

今回作成する各ページに共通なレイアウトはsrc/app/layout.tsxに作成していきます。
{children}と書かれている各ページのメインコンテンツが表示されます。

import type { Metadata } from 'next'
import { Noto_Sans_JP } from 'next/font/google'
import './globals.css'

const notoSansJp = Noto_Sans_JP({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Nextブログ',
  description: 'NextjsとmicroCMSで作成したブログです。',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ja">
      <body className={notoSansJp.className}>{children}</body>
    </html>
  )
}

まずはヘッダーを作成します。

import type { Metadata } from 'next'
import { Noto_Sans_JP } from 'next/font/google'
import './globals.css'
import Link from 'next/link'

const notoSansJp = Noto_Sans_JP({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Nextブログ',
  description: 'NextjsとmicroCMSで作成したブログです。',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ja">
      <body className={notoSansJp.className}>
        {/* ↓追加↓ */}
        <header className="mb-16 bg-[#007697]">
          <div className="mx-auto flex h-16 max-w-screen-xl items-center justify-between px-2">
            <Link href="/" className="text-xl font-bold">
              Blog title
            </Link>
          </div>
        </header>
        {/* ↑追加↑ */}
        {children}
      </body>
    </html>
  )
}

localhost:3000にアクセスして以下のように表示されていることを確認します。

これでも良いですが、headerをcomponentとして書き出してみます。
src/components/layoutsディレクトリの中にHeader.tsxファイルを作成します。

先ほどのheaderの部分を返すcomponentを作成します。

import Link from 'next/link'

export const Header = () => {
  return (
    <header className="mb-16 bg-[#007697]">
      <div className="mx-auto flex h-16 max-w-screen-xl items-center justify-between px-2">
        <Link href="/" className="text-xl font-bold">
          Blog title
        </Link>
      </div>
    </header>
  )
}

layout.tsxで作成したcomponentを読み込むように変更します。

import type { Metadata } from 'next'
import { Noto_Sans_JP } from 'next/font/google'
import './globals.css'
import { Header } from '@/components/layouts/Header' // headerコンポーネントをimport

const notoSansJp = Noto_Sans_JP({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Nextブログ',
  description: 'NextjsとmicroCMSで作成したブログです。',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ja">
      <body className={`${notoSansJp.className} flex min-h-screen flex-col`}>
        <Header /> {/* コンポーネントを呼び出すように変更 */}
        {children}
      </body>
    </html>
  )
}

先ほどと同じように表示されていることを確認してheaderの作成は完了です。

メインコンテンツ・サイドバーの枠組みを作成

メインコンテンツ・サイドバーを作り始める前に大まかなスタイルを当てていきます。
前回作成したpage.tsxでのmicroCMSとの接続確認の処理は削除してメインコンテンツであることがわかるように修正します。

export default async function Home() {
  return <div>メインコンテンツ</div>
}

layout.tsxでメインコンテンツとサイドバーの領域を確保しておきます。

import type { Metadata } from 'next'
import { Noto_Sans_JP } from 'next/font/google'
import './globals.css'
import { Header } from '@/components/layouts/Header'

const notoSansJp = Noto_Sans_JP({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Nextブログ',
  description: 'NextjsとmicroCMSで作成したブログです。',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ja">
      <body className={`${notoSansJp.className} flex min-h-screen flex-col`}>
        <Header />
        {/* ↓追加↓ */}
        <main className="grow px-2">
          <div className="mx-auto max-w-screen-xl md:grid md:grid-cols-8 md:gap-4">
            <div className="mb-16 border md:col-span-5 md:mb-0">{children}</div>
            <div className="border md:col-span-3">sidebar</div>
          </div>
        </main>
        {/* ↑追加↑ */}
      </body>
    </html>
  )
}

メインコンテンツとサイドバーの領域が分かりやすいようにborderクラスを指定しています。
スマホサイズではサイドバーがメインコンテンツの下に移動するようにスタイルを当てています。

PC

スマホ

フッターの作成

src/components/layoutsディレクトリにフッターのコンポーネントとしてFooter.tsxを作成します。

export const Footer = () => {
  return (
    <footer className="bg-[#333333] py-[16px] text-center text-white">
      <span className="mt-[24px] text-xs">© Nextブログ</span>
    </footer>
  )
}

layout.tsxでフッターのコンポーネントを読み込みます。

import type { Metadata } from 'next'
import { Noto_Sans_JP } from 'next/font/google'
import './globals.css'
import { Header } from '@/components/layouts/Header'
import { Footer } from '@/components/layouts/Footer' // 追加

const notoSansJp = Noto_Sans_JP({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Nextブログ',
  description: 'NextjsとmicroCMSで作成したブログです。',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ja">
      <body className={`${notoSansJp.className} flex min-h-screen flex-col`}>
        <Header />
        <main className="grow px-2">
          <div className="mx-auto max-w-screen-xl md:grid md:grid-cols-8 md:gap-4">
            <div className="mb-16 border md:col-span-5 md:mb-0">{children}</div>
            <div className="border md:col-span-3">sidebar</div>
          </div>
        </main>
        <Footer /> {/* 追加 */}
      </body>
    </html>
  )
}

localhost:3000にアクセスしてフッターが表示されることを確認します。