nextjs+tailwindcssで共通レイアウトの実装 - フリーランス　技術調査ブログ

共通レイアウト用のコンポーネント

components/Laout.jsファイルを作成して下記のコーディングを行う

import Head from 'next/head'
import Link from 'next/link'

export default function Layout({children, title= "HP by nuxtjs"}) {
    return (
        <div className="flex justify-center items-center flex-col min-h-screen text-gray-600 text-sm font-mono">
            <Head>
                <title>{title}</title>
            </Head>
            <header>
                <nav className="bg-green-800 w-screen">
                    <div className="flex items-center pl-8 h-14">
                        <div className="flex space-x-4">
                            <Link href="/">
                                <a className="text-green-300 hover:bg-green-700 px-3 py-2 rounded">
                                    ホーム
                                </a>
                            </Link>
                            <Link href="/blog-page">
                                <a className="text-green-300 hover:bg-green-700 px-3 py-2 rounded">
                                    ブログ
                                </a>
                            </Link>
                            <Link href="/contact-page">
                                <a className="text-green-300 hover:bg-green-700 px-3 py-2 rounded">
                                    問い合わせ
                                </a>
                            </Link>
                        </div>
                    </div>
                </nav>
            </header>
            <main className="flex flex-1 justify-center items-center flex-col w-screen">
                { children }
            </main>
            <footer className="w-full h-12 flex justify-center items-center border-t">
                <a
                    className="flex items-center"
                    href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                Powered by{' '} hogehoges                
                </a>
            </footer>
        </div>
    )
}

ページ作成

上記で作成したレイアウトを読み込みページを作成する。pages/contact.jsファイルを作成して下記のように記述する

import Layout from '../components/Layout'
import Image from 'next/image'

const Contact = () => {
    return (
        <Layout title="Contact">
            <div className="bg-white text-center shodow-xl p-8 w-80 rounded">
                <div className="mt-4">
                    <p className="font-bold">Contant info</p>
                </div>
                <div className="flex justify-center mt-4">
                    <Image 
                    className="rounded-full"
                    src="/ab.jpg"
                    width={240}
                    height={240}
                    alt="Avatar" />
                </div>
                <div className="mt-4">
                    <p className="font-bold">Address</p>
                    <p className="text-xs mt-2 text-gray-600">City A</p>
                    <p className="font-bold mt-4">Email</p>
                    <p className="text-xs mt-2 text-gray-600">xxxxxxxxx@example.com</p>
                    <p className="font-bold mt-4">Phone</p>
                    <p className="text-xs mt-2 text-gray-600">090-1234-5678</p>
                </div>
            </div>
        </Layout>
    )
}

export default Contact

実装結果

f:id:PX-WING:20210228000909p:plain