Next.js 공부하기 4일차

안녕하세요 🐸!

메타데이터

일반적으로 메타데이터는 데이터를 위한 데이터를 의미합니다.
예를들어 {이름:김삼순} 이라는 데이터가 있을 때 이 데이터의 타입, 형식, 인코딩, 길이 등의 정보를 메타데이터라 합니다.
Next.js를 통해 만드는 웹 앱의 경우 메타데이터는 사이트의 타이틀, 설명 등이 있습니다. 메타데이터의 특징은 다음과 같습니다.

1. 레이아웃, 페이지 파일에서만 설정 가능
2. 서버 컴포넌트에서만 가능
3. 하위의 메타데이터가 상위의 메타데이터를 병합

메타데이터로 사용할 수 있는 키는 Next.js가 정해놓은 표준 메타데이터입니다. 표준 메타데이터에 속하지 않은 메타데이터를 사용하는 경우 head 내에 meta는 생성되지 않습니다.
Next.js에서 정한 메타데이터 필드의 목록은 다음의 링크에서 확인할 수 있습니다.
https://nextjs.org/docs/app/building-your-application/optimizing#metadata-fields

하위의 메타데이터가 상위의 메타데이터를 병합한다는 내용이 했갈렸습니다. 그래서 내용 보충이 필요하니다.
NextJS에서 페이지들은 계층관계를 가지며 여기서 부모 페이지에서 설정한 메타데이터는 자식 페이지로 전이됩니다. 만약 root 페이지에서 title 속성의 값을 Home 이라고 한다면 이후 자식 페이지에서는 title 을 설정하지 않는 한 Home 으로 유지 됩니다.
이것의 응용으로 부모 페이지에서는 title만 설정하고 자식페이지에서 descript을 설정했다면 자식페이지는 title과 description 을 모두 갖게 됩니다.

Route group

NextJS의 폴더 경로는 URL에 매핑됩니다. 하지만 Route group는 URL 경로에 포함되지 않습니다.
이를 통해 파일 구조를 보다 논리적으로 그룹화 하여 관리할 수 있습니다.

사용법

폴더의 이름을 괄호로 묶어서 만들 수 있습니다.
다음은 NextJS 공식 문서의 참고 예시입니다.

Next.js에서 대부분의 경우 디렉토리는 곧 URL경로가 됩니다.
지금까지 배운 지식으로라면 app/(marketing)/about/page.js 의 URL은 /(marketing)/about 이 되어야합니다. 하지만 위 이미지의 예시를 보면 알 수 있듯 실제 URL은 /about 이 됩니다.
주의할 점으로 루트 레이아웃 파일과 not-found파일은 루트 경로에 위치해야한다는 점입니다.

Dynamic Routes

동적으로 변하는 라우트입니다.
리액트에서 사용했었던 /movies/:id 형식의 라우트와 같습니다.
반면 공부하면서 사용했던 / , /about-us/ 등 과 같이 고정된 라우트는 static routes (정적 라우트) 라고 합니다.
폴더구조로 라우트를 표현하는 Next.js 에서는 이 또한 폴더 구조로써 표현할 수 있습니다(‼️‼️)
다이나믹 라우트가 적용될 부분의 폴더의 이름을 대괄호([]) 로 감싸서 사용할 수 있습니다.
리액트에서 구현했던 /movies/:id 형식을 Next.js에서 구현하기 위한 폴더 구조는 다음과 같습니다. ![[assets/img/screenshot/Pasted image 20241023220908.png]]

위의 폴더구조에서 movies의 하위에는 [id] 라는 폴더가 있으며 이는 /movies/:id 와 같은 라우팅 기능을 제공합니다.

Dynamic Routes 값 사용 하기

이렇게 전달받은 값은 page 파일의 파라미터에서 받을 수 있습니다.
params 와 searchParams 를 가지며 각각은 다음을 뜻합니다

• .params : URL의 변수 값
• .searchParams : 쿼리스트링 값

export default function MovieDetail(props){ // props 가 아니어도 괜찮습니다.
    console.log(props);
    return(
        <h1>Movie</h1>
    )
}

만약 /movies/123?page=10 로 접속을 시도한다면 로그에는 다음 처럼 남습니다. { params : { id : '123' }, searchParams : { page : 10 } }

로그는 서버 로그에 남습니다.

---

참조 : https://nextjs.org/docs/app/building-your-application/routing/route-groups