1-7. 특별한 예약 파일들

Next.js에서는 라우팅을 폴더 기반, 즉 Nested Folders로 구현

• 특정 경로 하위에 있는 라우팅은 모두 공통 layout 적용
• 특정 컴포넌트가 로딩 중일 때, 오류가 발생했을 때 띄울 UI
  와 같은 특정 처리를 위해 생성되는 special files

layout

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

자식 노드에 있는 요소들이 공통 적용을 받아야 하기 때문에 반드시 children prop 이 존재해야 함

동일 layout안에서 다른 경로를 계속해서 왔다 갔다 할 때 re-rendering 이 일어나지 않음. 따라서 headers, footers, sidebars처럼 유저가 경로를 마음껏 탐색하고 다녀도 굳이 바뀔 필요가 없는 경우 유용

template

layout과 상당히 유사한 컴포넌트

차이점은
상태를 유지하는가, 리렌더링이 일어나는가

경로 전반에 걸쳐 상태가 유지되는 레이아웃과 달리, 템플릿은 라우팅을 탐색할 때 각 하위 항목에 대해 새 인스턴스를 만듦
즉, User 입장에서 동일한 Template를 공유하는 경로 사이를 왔다갔다 할 때 DOM 요소가 다시 생성된다는 것 의미

use-case

1. 템플릿을 통한 페이지 open animation
   • 페이지 간 전환 시 애니메이션을 계속해서 주고 싶을 때
   • layout으로 만들어놓으면, 최초 렌더링시에만 animation이 적용되고 끝남
2. useEffect, useState에 의존하는 기능

not-found

next.js에서는 별도 설정 없이 기본 스타일이 된 not found 에러 페이지 제공

metadata & SEO

seo(Search Engine Optimization, 검색 엔진 최적화)
웹 사이트나 웹 페이지를 검색엔진에서 더 높은 순위에 노출시키기 위한 방법

SEO는 검색 결과에서 웹사이트가 더 위에 나타나도록 만드는 여러 기술과 전략

1. 검색 엔진에 이미지 내용 설명
   alt텍스트는 검색 엔진에 이미지의 내용과 맥락을 설명
   검색 엔진은 이미지 자체를 "보지"못하므로, alt텍스트를 통해 이미지가 무엇에 관한 것인지 이해하고, 관련 검색 쿼리에 대한 결과로 해당 이미지를 더 정확하게 랭킹할 수 있음
2. 접근성 향상
   alt텍스트는 시각 장애가 있는 사용자가 웹사이트의 이미지 콘텐츠를 이해하는데 도움. 이러한 접근성 개선은 검색 엔진에 의해 긍정적인 신호로 해석되어, 전반적인 사이트의 SEO 점수 향상

Next.js는 향상된 SEO를 제공하기 위해 기존 우리가 html head에 삽입했었던 많은 정보를 metadata는 객체 형태로 지원

1. static
   • page.tsx 또는 layout.tsx

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

• metadata in page.tsx: 해당 page.tsx 컴포넌트에만 적용
• metadata in layout.tsx: 해당 layout의 하위 요소에 모두 적용

1. dynamic
   • 동적으로 변경되는 params 기반으로 metadata를 변경하고 싶을 때, generateMetadata function 사용