키모스토리

#6. Active Links 본문

Web Devlopment/Next-Blog Project

#6. Active Links

키모형 2025. 4. 5. 01:29
반응형

1. 기존 layout.jsx 파일에 현재 url을 체크하여 스타일지정

"use client"

import "./globals.css";
import {Poppins} from "next/font/google";
import { usePathname } from "next/navigation";
import Link from "next/link";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["200", "400", "700"],
  style: ["normal", "italic"],
  variable: "--font-poppins",
});

export default function RootLayout({ children }) {
  const pathname = usePathname();
  // console.log(pathname);

  return (
    <html lang="en">
      <body className={`${poppins.variable} font-sans`}>
        <header>
          <nav>
            <Link className={`nav-link ${pathname==="/"? "nav-link-active":""}`} href="/">
              Home
            </Link>
            <div>
              <Link className={`nav-link ${pathname==="/register"? "nav-link-active":""}`} href="/register">
                Register
              </Link>
              <Link className={`nav-link ${pathname==="/dashboard"? "nav-link-active":""}`} href="/dashboard">
                Dashboard
              </Link>
            </div>
          </nav>
        </header>

        <main>
        {children}
        </main>

        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

 

 

2. 반복되는 Link 코드 부분을 컴포넌트로 분리함.

/src/components/NavLink.jsx

"use client"

import Link from "next/link";
import { usePathname } from "next/navigation";

export default function NavLink({label, href}) {  
  const pathname = usePathname();
  return (  
    <Link className={`nav-link ${pathname===href ? "nav-link-active":""}`} href={href}>
      {label}
    </Link>
  )
}

 

3. layout.jsx 수정

import "./globals.css";
import {Poppins} from "next/font/google";
import NavLink from "@/components/NavLink";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["200", "400", "700"],
  style: ["normal", "italic"],
  variable: "--font-poppins",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${poppins.variable} font-sans`}>
        <header>
          <nav>
            <NavLink label="Home" href="/" />
            <div>
              <NavLink label="Register" href="/register" />
              <NavLink label="Dashboard" href="/dashboard" />
            </div>
          </nav>
        </header>

        <main>
        {children}
        </main>

        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

 

 

4. nav 전체를 컴포넌트로 분리

 

/src/components/Navigation.jsx

"use client"

import NavLink from "./NavLink"

export default function Navigation() {
  return (
    <nav>
      <NavLink label="Home" href="/" />
      <div>
        <NavLink label="Register" href="/register" />
        <NavLink label="Dashboard" href="/dashboard" />
      </div>
    </nav>
  )
}

 

5. Footer 컴포넌트 작성

export default function Footer() {
  return (
    <footer>
      <p>
        Copyright © {new Date().getFullYear()} - All right reserved by
        LearnWithJon
      </p>
      <a
        href="https://www.youtube.com/@LearnWithJonVadar"
        target="_blank"
        rel="external"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          className="fill-current"
        >
          <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
        </svg>
      </a>
    </footer>
  );
}

 

6. layout.jsx 수정

import "./globals.css";
import {Poppins} from "next/font/google";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";

const poppins = Poppins({
  subsets: ["latin"],
  weight: ["200", "400", "700"],
  style: ["normal", "italic"],
  variable: "--font-poppins",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${poppins.variable} font-sans`}>
        <header>
          <Navigation />
        </header>
        <main>
        {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

 

 

반응형
저작자표시

'Web Devlopment > Next-Blog Project' 카테고리의 다른 글

#8. Auth & Guest Links  (0) 2025.04.05
#7. Login  (0) 2025.04.05
#5. server-only  (0) 2025.04.05
#4. register (MongoDB, Jose, session, cookie)  (0) 2025.04.04
#3. zod.dev (validation)  (0) 2025.04.04
'Web Devlopment/Next-Blog Project' Related Articles more