[Next.js] 특별한 예약 파일들 (layout, template, not-found, metadata와 SEO)

layout

어떤 segment와 그의 자식 노드에 있는 요소들이 공통적으로 적용받게 할 UI를 정의

레이아웃을 지정하고싶은 경로의 루트 폴더에 layout.tsx 파일을 만들고, 자식 노드들이 표시될 곳에 {children}을 사용해 레이아웃을 만들어준다.

 

 

template

layout과 유사하지만 상태를 유지 or 리렌더링 발생에서 차이가 있다.

layout은 경로 전반에서 상태가 유지되며 필요한 경우가 아니라면 굳이 리렌더링 하지 않는데, template은 라우팅을 탐색할 때마다 새 인스턴스를 만든다. (즉, 동일한 DOM 요소 생성)

 

아래와 같은 경우에 활용할 수 있다.

1) 템플릿을 통한 페이지 open animation

- 페이지 전환시 애니메이션을 계속 재생하고 싶을 때

- layout으로 만드는 경우에는 변화가 없으므로 최초 렌더링시에만 애니메이션이 재생됨

 

2) useEffect, useState에 의존하는 기능이 있을 때

 

특별한 목적이 있는게 아니라면 layout을 사용하면 된다!

 

 

not-found

리액트 프로젝트에서는 '*'을 이용해 지정돼있는 경로가 아닌 모든 경로를 not-found로 명시해줬어야했는데, Next.js에서는 생성하지 않아도 자동으로 Not found 페이지를 띄워준다.

 

not-found 파일을 만들어 기본적으로 제공되는 내용말고 다른 내용을 처리하고 싶다면 아래와같이 실행한다.

 

1) scr > app에 not-found.tsx 파일 생성

2) 내용이나 처리할 동작을 넣고 export default 해주면 끝!

 

 

metadata

SEO에 중요한 요소

meatdata라는 객체를 만들어 export 해주기만하면 된다!

모든 페이지에 공통으로 적용되는 경우 (ex. 공통 타이틀) 루트의 layout에 넣어주면 되고, 특정 페이지에서 사용할 metadata라면 그 페이지 파일에서 작성하면 된다

 

export const metadata: Metadata = {
	title: "Sparta Next App",
	description: "This is awesome Website",
}

 

params를 활용한 metadata

import React from "react";

type Props = {
  params: {
    id: string;
  };
};

export function generateMetadata({ params }: Props) {
  return {
    title: `Detail 페이지 : ${params.id}`,
    description: `Detail 페이지 : ${params.id}`,
  };
}

const TestDetailPage = ({ params }: Props) => {
  return <div>Detail 페이지 : {params.id}</div>;
};

export default TestDetailPage;