글쓰는 개발자

[next.js] AppRouter와 NavigationBar 본문

Development/Web

[next.js] AppRouter와 NavigationBar

세가사 2025. 7. 22. 08:12
반응형

next.js 는 폴더 구조를 따라 라우터를 구성할 수 있는 app router라는 기능을 제공합니다.

app 폴더 내에 dashboard 라는 폴더내에 page.js 혹은 page.tsx 파일을 위치시키면 /dashboard라는 주소로 해당 페이지에 접근할 수 있습니다.

 

App Router 기능을 잘 활용하여 네비게이션 바를 구성합니다.

 

위 네비게이션 바 메뉴의 구성에 맞춰 폴더와 페이지, 스타일 파일을 구성합니다. community, course, faq, review 폴더를 생성하고 page.tsx와 style.module.css 를 각각 만들었습니다.

components 폴더에 네비게이션 바를 위한 index.tsx를 만들고 네비게이션은 모든 페이지에 나타날 수 있도록 layout.tsx에 포함해 줍니다.

layout.tsx

import Navigation from "@/components/navigation";
...

export default function RootLayout({children,}: Readonly<{children: React.ReactNode;}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Navigation/>
        <div className={styles.body}>
          {children}
        </div>
      </body>
    </html>
  );

 

네비게이션바는 앞단의 로고와 중단에 메뉴아이템 우측 버튼들로 구성합니다.

export default function Navigation(): ReactElement {
  return (
    <nav className={styles.nav}>
    <div className={styles.menuBar}>
        <Logo />
        <MenuItems />
        <ButtonRow />
    </div>
    </nav>
  );
}

 

로고는 클릭시 메인화면(/) 으로 돌아가도록 설정하고 이미지를 앞에 오도록 구성합니다.

const Logo = (): ReactElement => {
  return (
    <Link 
        href={'/'}
        className={styles.logo}>
      <Image
        className={styles.logoImg}
        src="/logo.png" alt="coding club logo"
        width={30} height={30} />
      <div className={styles.siteName}>Coding Club</div>
    </Link>
  )
}

 

메뉴는 추후 변경이 가능하도록 리스트로 만들어 폴더구조에 맞춰 href를 구성합니다.

type menuItemType = {
  name: string;
  url: string;
}

const menuItem: menuItemType[] = [
  { name: '코스', url: '/course' },
  { name: '커뮤니티', url: '/community' },
  { name: 'FAQ', url: '/faq' },
  { name: '리뷰', url: '/review' },
]

const MenuItems = (): ReactElement => {
  return (
    <div className={styles.menuItems}>
      {menuItem.map(({ name, url }, index) =>
      (<Link
        key={index}
        href={url}
        className={styles.menuItem}>{name}</Link>))}
    </div>
  )
}

 

마지막으로 버튼을 하나의 블록으로 묶어서 구성합니다.

const ButtonRow = (): ReactElement => {
  return (
    <div className={styles.buttonRow}>
      <div className={styles.loginButton}>Login</div>
      <div className={styles.joinButton}>Join</div>
    </div>
  )
}

 

menu는 space-between으로 각자 블록이 같은 간격을 띄게 하고 최소 최대를 정해 메뉴의 형태가 무너지지 않게 잡습니다. 또한 flex를 0.9로 잡아 양옆에 적당한 여백을 띄우는 것이 좋습니다.

.menuBar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1920px;
    min-width: 1120px;
    flex: 0.9 0 0px;
}

 

반응형
저작자표시 (새창열림)

'Development > Web' 카테고리의 다른 글

[next.js] vercel에 배포하기  (2) 2025.07.23
[vue] 설치 및 신규 프로젝트 생성  (4) 2025.07.23
[next.js] style.module.css 사용  (6) 2025.07.20
[next.js] 프로젝트 생성하기  (0) 2025.07.20
[React 기초] useState array update  (2) 2024.08.25
'Development/Web' Related Articles more