Next.js 페이지와 Layout 정리

1. Next.js 페이지 컴포넌트

Next.js에서는 page.tsx 파일이 페이지 역할을 한다.

export default function Page() {
    return <div>안녕하세요.</div>;
}

여기서 중요한 것은 함수 이름이 아니라 export default로 컴포넌트를 내보내는 것이다.

따라서 함수 이름은 Page가 아니어도 된다.

2. 폴더 구조와 URL

Next.js에서는 폴더 구조가 URL 경로와 연결된다.

app/
├── page.tsx
└── posts/
    └── page.tsx

다음과 같은 URL이 만들어진다.

/          → app/page.tsx
/posts     → app/posts/page.tsx

 

따라서 게시물 목록 페이지를 만들고 싶다면 posts 폴더를 만들고 그 안에 page.tsx를 작성하면 된다.

3. Layout이란?

Next.js의 layout은 페이지 컴포넌트를 감싸는 역할을 한다.

layout
   └── page

여러 페이지에서 공통으로 사용해야 하는 UI는 layout에 배치할 수 있다.

예를 들어 다음과 같은 요소를 공통으로 사용한다면 layout에서 관리하는 것이 좋다.

• 헤더
• 네비게이션
• 푸터
• 공통 스타일

이렇게 하면 각각의 페이지마다 같은 코드를 반복해서 작성하지 않아도 된다.

4. a 태그와 Link

일반적인 HTML에서는 <a> 태그를 이용해 다른 페이지로 이동한다.

Link를 사용하면 Next.js가 페이지 이동을 효율적으로 처리할 수 있기 때문에 Next.js 내부 페이지를 이동할 때는 Link를 사용하는 것이 좋다.

import Link from "next/link";

<Link href="/posts">
    게시물 목록
</Link>

5. 서버 컴포넌트와 클라이언트 컴포넌트

Next.js의 page.tsx와 layout.tsx는 기본적으로 서버 컴포넌트이다.

브라우저에서 동작하는 React 기능을 사용해야 한다면 클라이언트 컴포넌트로 변경해야 한다.

파일의 가장 위에 다음을 작성한다.

'use client';