Next.js 라우팅 (3)

Next.js에서 페이지 생성 및 라우팅하기

1. 페이지 생성하기

Next.js에서는 URL을 이용하여 페이지를 구분합니다. 예를 들어, '/list'로 접속하면 상품 목록 페이지를 보여주는 식으로 설정할 수 있습니다. 이를 위해 다음의 단계를 따릅니다:

1. 'app' 폴더 안에 새 폴더를 만듭니다. 이 폴더의 이름은 원하는 URL의 일부가 됩니다.
2. 새로 만든 폴더 안에 'page.js' 파일을 만들고, 이 파일 안에 HTML을 작성합니다.

예를 들어, '/list' URL로 접속했을 때 상품 목록 페이지를 보여주고 싶다면, 'app' 폴더 안에 'list'라는 폴더를 만들고, 그 안에 'page.js' 파일을 만들어 상품 목록 HTML을 넣으면 됩니다.

 

2. Navbar 생성하기

웹 페이지 상단의 메뉴를 Navbar라고 부릅니다. 이 Navbar를 만들기 위해, 'globals.css'에 다음과 같이 스타일을 추가합니다.

.navbar {
  background: white;
  padding: 20px;
}
.navbar a {
  margin-right: 10px;
  text-decoration: none;
}

 

그리고 메인 페이지의 'page.js' 파일에 다음과 같이 코드를 추가합니다.

import Link from "next/link";

export default function Home() {
  return (
    <main>
      <div className="navbar">
        <Link href="/">home</Link>
        <Link href="/list">list페이지</Link>
      </div>
      <h1 className="title">Programming Log</h1>
      <p className="title-sub">by dev kim</p>
    </main>
  )
}

 

 

3. 중복되는 HTML 처리하기

각 페이지마다 반복적으로 보여줘야 하는 HTML UI가 있다면, 'layout.js' 파일에 작성하여 중복을 제거할 수 있습니다. Next.js는 'page.js'를 보여줄 때 'layout.js' 파일이 있다면, 'layout.js' 내용 안에 'page.js' 내용을 담아서 보여줍니다.

예를 들어, 모든 페이지에서 보여줘야 하는 Navbar를 'layout.js' 파일에 작성하면, 각 'page.js' 파일에서는 Navbar를 따로 작성할 필요가 없습니다.