[Next.js14 강의] 5강 - 기본 페이지 생성 및 링크 추가 (Link 컴포넌트 사용법)

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 Next.js에서 기본 페이지를 생성하고, 페이지 간 네비게이션을 위해 Link 컴포넌트를 사용하는 방법을 학습합니다. 이를 통해 여러 페이지를 연결하여 하나의 웹 애플리케이션을 구성하는 방법을 이해할 수 있는 수업을 준비했습니다.

 

 

1. 기본 페이지 생성

 

홈페이지 생성 (Home Page)

· 가장 기본적인 페이지로, 홈페이지 역할을 하는 index.js 파일을 pages 디렉토리에 생성합니다.
· index.js 파일은 루트 경로(/)와 연결되며, 이 파일에서 홈 페이지를 정의합니다.

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <p>This is the home page.</p>
    </div>
  );
}

728x90

추가 페이지 생성

· pages/about.js와 pages/contact.js 파일을 생성하여 "About" 페이지와 "Contact" 페이지를 각각 정의합니다.

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page.</p>
    </div>
  );
}

// pages/contact.js
export default function Contact() {
  return (
    <div>
      <h1>Contact Us</h1>
      <p>This is the contact page.</p>
    </div>
  );
}

 

이러한 페이지 파일들은 자동으로 각각 /about와 /contact 경로와 연결됩니다.

 

 

2. Link 컴포넌트를 사용한 페이지 간 네비게이션

 

Link 컴포넌트란?

Next.js의 Link 컴포넌트는 클라이언트 측에서 페이지 간의 전환을 쉽게 구현할 수 있는 기능을 제공합니다. 이를 통해 네비게이션 바, 메뉴, 버튼 등을 통해 사용자들이 페이지 간을 이동할 수 있습니다.

 

Link 컴포넌트 사용법

Link 컴포넌트는 href 속성을 사용하여 이동할 경로를 지정합니다. Link 컴포넌트 내부에 HTML 태그를 자식 요소로 넣어 스타일링된 링크를 만들 수 있습니다.

반응형

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <nav>
        <ul>
          <li>
            <Link href="/about">
              <a>About Us</a>
            </Link>
          </li>
          <li>
            <Link href="/contact">
              <a>Contact Us</a>
            </Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}

 

위 코드에서는 홈 페이지에서 "About Us"와 "Contact Us" 페이지로 이동할 수 있는 링크를 설정하였습니다.

 

Link 컴포넌트의 장점

Link 컴포넌트는 Next.js에서 자동으로 클라이언트 측 네비게이션을 제공하므로, 전체 페이지를 다시 로드하지 않고도 빠르게 페이지 간 이동이 가능합니다. 이는 사용자 경험을 크게 향상시킵니다.

 

 

3. Link 컴포넌트와 Active Link

 

현재 페이지 표시하기

네비게이션 바에서 현재 사용자가 위치한 페이지를 시각적으로 구분하는 것은 사용자 경험에서 중요한 요소입니다. 이를 위해 Link 컴포넌트에 className을 조건부로 추가하는 방법을 사용할 수 있습니다.

SMALL

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function NavBar() {
  const router = useRouter();

  return (
    <nav>
      <ul>
        <li className={router.pathname === "/" ? "active" : ""}>
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li className={router.pathname === "/about" ? "active" : ""}>
          <Link href="/about">
            <a>About Us</a>
          </Link>
        </li>
        <li className={router.pathname === "/contact" ? "active" : ""}>
          <Link href="/contact">
            <a>Contact Us</a>
          </Link>
        </li>
      </ul>

      <style jsx>{`
        .active {
          font-weight: bold;
          color: blue;
        }
      `}</style>
    </nav>
  );
}

 

useRouter 훅을 사용하여 현재 페이지 경로를 가져오고, 해당 경로에 따라 active 클래스를 적용하여 시각적인 효과를 줄 수 있습니다.

 

 

4. Link 컴포넌트의 고급 사용법

 

프로그래밍적 네비게이션

때로는 사용자가 버튼을 클릭하거나 특정 조건이 충족될 때 자동으로 페이지가 이동하도록 하고 싶을 수 있습니다. 이 경우 Link 컴포넌트 대신 useRouter 훅의 push 메서드를 사용할 수 있습니다.

import { useRouter } from 'next/router';

export default function RedirectButton() {
  const router = useRouter();

  const handleClick = () => {
    // 어떤 조건이 충족될 때 페이지 이동
    router.push('/about');
  };

  return <button onClick={handleClick}>Go to About Page</button>;
}

 

사용자 정의 링크 컴포넌트 만들기

Link 컴포넌트를 래핑하여 스타일링이 적용된 사용자 정의 링크 컴포넌트를 만들 수도 있습니다.

import Link from 'next/link';

export default function CustomLink({ href, children }) {
  return (
    <Link href={href}>
      <a style={{ color: 'red', textDecoration: 'underline' }}>{children}</a>
    </Link>
  );
}

이렇게 만든 CustomLink 컴포넌트는 프로젝트 전반에 걸쳐 일관된 스타일의 링크를 제공할 수 있습니다.

 

이 강의를 통해 Next.js에서 기본 페이지를 생성하고, Link 컴포넌트를 사용하여 페이지 간 네비게이션을 구현하는 방법을 배웠습니다. 이제 여러 페이지를 가진 웹 애플리케이션을 만들고, 사용자 친화적인 네비게이션을 추가할 수 있습니다.

 

 

- 이전 수업 목록