Next.js 14버전 - Layouts,Metadata,Dynamic Routes

✅Layouts

• Next.js는 처음에는 layout 컴포넌트에 있는 export된 디폴트 컴포넌트를 렌더링한다. 
• react규칙으로 내부에 있는 컴포넌트들은 자동으로 children이라는 props로 바뀌게 된다. 
• 레이아웃은 중첩이 가능하다. 

 

• 제일 하위에 있는 폴더로 들어가면 모든 상위에 있는 layout다 출력되는 것이다. 제일 상위에 있는 폴더는 하위에 있는 폴더가 다 노출되지 않는다. 

✅(폴더이름)

• route groups은 폴더 이름을 괄호로 묶어줘야 한다. 괄호로 묶은 폴더는 url에 전혀 영향을 미치지 않는다. 
• routes를 그룹화해서 logical groups으로 만들 수 있다. 
• 이것을 사용함으로써 일부 레이아웃을 선택하거나 선택 해제하여 복잡한 일을 할 수 있다.

✅Metadata

• 웹의 head에 보여지게 되는 object이고 메타데이터이다.
• 레이아웃이 중첩되는 방식과 마찬가지로 메타데이터도 중첩이 가능하지만 실제로는 중접되지 않고 병합이 된다. 
• page나 layout, 혹은 서버 컴포넌트에서 메타데이터를 내보낼 수 있다. 
• 직접 head에 무언가를 넣거나 설치를 하지 않아도 된다. 

✅Dynamic Routes

• [id] : 이 표시는 특정 파일 뒤에 무엇이 들어가도 괜찮다는 것을 알려준다. 
• react_router와 하는 방식은 같지만 hook이 필요 없다.  
• Next.js는 url에 있는 id를 인식해서 특정 컴포넌트 페이지를 렌더링한다. 후에 prop으로 유저가 보 id를 받고 렌더링을 하게 된다. 

 

참고 자료 

• https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts