느려도 한걸음씩

Next.js - (3) 페이지 이동, 레이아웃 파일 본문

FE develop/Next.js

Next.js - (3) 페이지 이동, 레이아웃 파일

hoj0806 2025. 5. 1. 08:40

 

이번 포스트에서는 Next.js에서 페이지 간 이동하는 방법과 layout.js 파일의 역할에 대해 알아보겠습니다.

 

 

🚀 페이지 이동: Link 컴포넌트 사용하기

Next.js에서 다른 페이지로 이동할 때는 next/link 패키지에서 제공하는 Link 컴포넌트를 사용해야 합니다.

import Link from "next/link";

export default function Home() {
  return (
    <main>
      <img src='/logo.png' alt='A server surrounded by magic sparkles.' />
      <h1>Welcome to this NextJS Course!</h1>
      <p>🔥 Let&apos;s get started! 🔥</p>
      <p>
        <Link href='/about'>About us</Link>
      </p>
    </main>
  );
}

 

위 코드처럼 Link 컴포넌트의 href 속성에 이동하고자 하는 경로(/about)를 작성하면 해당 페이지로 이동할 수 있습니다.

🔄 클라이언트 사이드 네비게이션

Link를 사용하면 전체 페이지를 새로고침하지 않고도 부드럽게 이동할 수 있습니다. 이는 Next.js가 페이지의 내용을 서버에서 렌더링한 뒤, 해당 HTML을 클라이언트에 전달하고, 이후 클라이언트 측에서 자바스크립트를 통해 화면을 업데이트하기 때문입니다.

즉, 사용자는 마치 단일 페이지 애플리케이션(SPA)처럼 빠르고 자연스러운 전환을 경험할 수 있습니다.

 

 

🧩 layout.js란?

Next.js 프로젝트를 생성하면 app 폴더 내부에 기본적으로 layout.js 파일이 포함되어 있습니다. 이 파일은 해당 프로젝트의 공통 레이아웃을 정의하는 역할을 합니다.

// app/layout.js
import "./globals.css";

export const metadata = {
  title: "NextJS Course App",
  description: "Your first NextJS app!",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

 

✅ 주요 구성 요소

  • children: 각 페이지(page.js) 컴포넌트가 렌더링되는 위치를 나타냅니다.
  • metadata: 각 페이지의 <head> 태그에 들어갈 정보를 설정합니다. title, description 외에도 다양한 SEO 관련 설정을 추가할 수 있으며, Next.js가 자동으로 적용해줍니다.
  • html, body 태그: 프로젝트의 가장 바깥쪽 구조를 구성합니다. 따라서 루트 레이아웃에서는 이 태그들을 직접 작성해주어야 합니다.

 

🧱 레이아웃의 중첩

Next.js에서는 레이아웃의 중첩(nested layout)도 지원합니다. 예를 들어, /about 경로에만 적용되는 별도의 레이아웃을 설정하고 싶다면, app/about/layout.js 파일을 만들어 다음과 같이 구성할 수 있습니다.

 

// app/about/layout.js
export default function AboutLayout({ children }: { children: React.ReactNode }) {
  return (
    <section>
      <nav>About Nav</nav>
      <div>{children}</div>
    </section>
  );
}

 

이렇게 하면 /about 페이지에만 적용되는 고유한 레이아웃을 설정할 수 있어, 페이지마다 서로 다른 구조를 가지도록 만들 수 있습니다.

 

📝 마무리

이번 포스트에서는 Next.js의 페이지 이동 방식과 layout.js 파일의 역할에 대해 알아보았습니다. Next.js의 강력한 라우팅과 레이아웃 시스템을 활용하면, 손쉽게 확장 가능한 프로젝트 구조를 만들 수 있습니다.

 

 

'FE develop > Next.js' 카테고리의 다른 글

Next.js - (6) 리액트 서버 컴포넌트 vs 클라이언트 컴포넌트  (0) 2025.05.01
Next.js - (5) 동적 라우팅  (0) 2025.05.01
Next.js - (4) 커스텀 컴포넌트 설정  (0) 2025.05.01
Next.js - (2) app 폴더와 페이지 라우팅  (0) 2025.05.01
Next.js - (1) Next.js란?  (0) 2025.05.01
'FE develop/Next.js' Related Articles more