概要

目次

今回はナビゲーションバーの基本部分を実装します。
以下gifアニメは実装後の様子です。ナビゲーションのアイテムを押すとURLが変更されます。

開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

実装のポイント

1.ナビゲーションを押したときの動き（下図）

2.レイアウトのCSS

コード部分

layout

layout.jsx

import './globals.css'
import Header from '@/components/Header'
import Providers from './Providers'
+import Navbar from '@/components/Navbar'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {/* Header */}
          <Header />

          {/* Navbar */}
+          <Navbar />

          {/* SearchBox */}

          {children}
        </Providers>
      </body>
    </html>
  );
}

Navbar

Navbar.jsx

import React from 'react'
import NavbarItem from './NavbarItem'

export default function Navbar
() {
  return (
    <div className="flex justify-center dark:bg-gray-600 bg-amber-100 lg:text-lg p-4">
            <NavbarItem title="Trending" param="fetchTrending" />
            <NavbarItem title="Top Rated" param="fetchTopRated" />

    </div>
  )
  }

NavbarItem

NavbarItem.jsx

import React from 'react'
import Link from "next/link";

export default function NavbarItem({title,param}) {
  return (
    <div className={`font-semibold p-2`}>
           <Link href={`/?genre=${param}`}>
                {title}
           </Link>    
    </div>
  )
}

参考

css

font-semibold p-2

flex justify-center

その他

Udemy

githubコミット分