😸

【Next.js】Next.js & Contentful BlogApp 【６Navbar Component】

2022/11/22に公開

Next.js

Contentful

tech

【６Navbar Component】

YouTube:https://youtu.be/IFloDi3ZcbI

https://youtu.be/IFloDi3ZcbI

今回はページトップに「Navbar」コンポーネントを作成します。

スタイルを適用しても英語のロゴの文字が少し細いので、
Googleウェブフォントを使用して太く見えるようにしています。

「Navbar」コンポーネントは「Layout」コンポーネント内でインポートします。

styles/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

components/Navbar.js

import Link from 'next/link'

const Navbar = () => {
  return (
    <div className="w-full bg-slate-900">
      <div className="max-w-7xl flex mx-auto p-3 items-center">
        <div className=" font-black text-3xl text-white">
          <Link href="/">My Blog App</Link>
        </div>
      </div>
    </div>
  )
}

export default Navbar

components/Layout.js

import Head from 'next/head'
import Navbar from './Navbar'

const Layout = ({ children, title = 'My Blog App' }) => {
  return (
    <div>
      <Head>
        <title>{title}</title>
      </Head>

      <div className=" w-full h-full bg-gradient-to-r from-yellow-500 to-red-500">
        <Navbar />
        <main>{children}</main>

        <footer className="py-3 text-center">
          <span>&copy; My Blog App</span>
        </footer>
      </div>
    </div>
  )
}

export default Layout

【６Navbar Component】

Discussion