More than 1 year has passed since last update.

imdb clone Part8　7 navbar実装 1/2 基本的な実装

Last updated at 2023-05-09Posted at 2023-05-09

概要

今回はナビゲーションバーの基本部分を実装します。
以下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コミット分

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

imdb clone Part8 7 navbar実装 1/2 基本的な実装

概要