Nextjs에서의 라우팅은 리액트와 같이 따로 설정 파일을 구성하지 않고 디렉토리를 추가하는 경우 자동적으로 라우팅을 구성해준다.
Nextjs에서는 13버전부터 앱 라우터를 지원하고 있다. 해당 페이지에서는 앱 라우터를 기반으로 작성되었다(v15.0.3). 앱 라우터에서는 app 디렉토리를 루트 경로로 하여 하위에 생성 된 디렉토리를 라우팅 경로로 설정한다.
위의 profile 디렉토리의 경로는 /dashboard/settings/profile 이 되는 것이다. 앱 라우터부터는 파일 이름에 따라 역할을 부여하고 있다.
예를 들어 페이지 컴포넌트를 만들고 싶으면 page.js 라는 이름으로 파일을 만들어야 한다. 다른 이름은 페이지 컴포넌트로 사용이 불가능하다.
즉, 디렉토리 내에 page.js가 존재하지 않으면 해당 경로로는 접근이 불가능하다.
page.js 파일 내부에서는 기존 리액트 컴포넌트와 동일한 형태로 코드를 작성하면 된다.
파일의 타입은 .js, .jsx, .tsx를 지원한다.
역할이 있는 파일 이름은 아래와 같다.
- layout
- page
- loading
- not-found
- error
- global-error
- route
- template
- default
이번 글에서는 layout, template 두가지에 대해서 정리해보았다.
레이아웃
레이아웃은 다양한 페이지에서 공통적으로 사용할 UI를 작성하는 파일이다. 앱 라우터에서는 레이아웃을 공식적으로 지원하기 때문에 이를 활용해서 간단하게 레이아웃을 구성할 수 있다.
export default function DashboardLayout({
children, // will be a page or nested layout
}: {
children: React.ReactNode
}) {
return (
<section>
{/* Include shared UI here e.g. a header or sidebar */}
<nav></nav>
{children}
</section>
)
}
위의 코드에서 레이아웃 컴포넌트의 children props를 전달 받는다. 이는 하위 레이아웃 또는 페이지를 전달 받을 수 있다. 그래서 위와 같이 코드를 작성하면 된다.
레이아웃 파일을 작성하면 레이아웃 파일이 존재하는 경로 뿐 아니라 하위 경로 모두에 적용된다.
app 디렉토리의 가장 상단 레벨에 루트 레이아웃을 필수적으로 만들어야 한다. 해당 파일 내부에는 html, body 태그를 포함해야 한다.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{/* Layout UI */}
<main>{children}</main>
</body>
</html>
)
}
템플릿
템플릿은 하위 레이아웃과 페이지를 랩핑 한다는 점에서 레이아웃과 유사하다. 차이점은 템플릿 파일이 존재하는 자식 라우팅 이동 시 컴포넌트를 새로 마운트하고 상태 또한 지워진다.
새롭게 useEffect를 호출해야하거나 상태를 초기화 하고 싶은 경우 등 일부 경우에는 레이아웃보다 더 적절할 수 있다.
하지만 일반적인 경우에는 템플릿보다는 레이아웃을 쓰는게 적합하다.
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}
메타데이터
레이아웃 또는 페이지 파일 내부에서 타이틀 또는 메타데이터를 정의할 수 있다. 레이아웃에 정의하는 경우 레이아웃을 포함하는 하위 경로 모두에 적용된다. 개별적으로 적용하고 싶다면 페이지에 추가하면 되며 둘다 존재하는 경우 페이지를 우선한다.
코드는 아래와 같이 metadata 객체를 정의하고 export하면 자동적으로 적용된다.
export const metadata: Metadata = {
title: 'Next.js',
}
동적인 메타데이터를 사용하고 싶다면 generateMetadata 함수를 정의하면 된다.
export async function generateMetadata({ params }) {
return {
}
}- 이 함수는 비동기 함수여야 한다.
- generateMetadata 함수는 페이지 컴포넌트보다 먼저 호출 되기 때문에 해당 함수에서 에러가 발생해도 에러 페이지가 뜨게 되니 주의해야 한다.
- 페이지 컴포넌트보다 먼저 호출 되기 때문에 해당 함수내에서 데이터에 접근 하는 경우 데이터가 존재하지 않을 수 있기 때문에 이를 고려하여 구성하여야 한다.
- 예를들어, 게시글 정보로 메타데이터를 구성할 때 존재하지 않는 게시글에 접근 하는 경우.
커스텀한 메타데이터를 추가하고 싶은 경우 other 속성을 사용한다.
export const metadata = {
other: {
custom: 'meta',
},
}
파비콘
파비콘은 특정 경로에 파일을 업로드하면 자동적으로 설정하게 된다.
favicon.ico 파일은 app 디렉토리 최상단에 위치하면 되고, icon.png(.ico, .jpg, .jpeg, .svg)는 app 디렉토리 하위 어느 경로에도 가능하다.
즉, 페이지마다 다른 파비콘을 사용하려면 icon 이름의 파일을 사용하면 된다.
'학습 정리(공식문서,강의) > Next.js' 카테고리의 다른 글
| 5. 병렬 라우트 (0) | 2024.11.26 |
|---|---|
| 4. 라우트 그룹 (0) | 2024.11.22 |
| 3. 디렉토리 이름 (0) | 2024.11.19 |
| 2. 에러와 로딩 처리 (0) | 2024.11.16 |
| Next 학습 정리(v15.0.3) (0) | 2024.11.14 |
