TIL
[2024.06.28] next.js 공부
_자몽
2024. 6. 28. 23:54
타입스크립트를 넘으니 next.js가 반갑게 맞이해준다... 이것도 얼른 해봐야지
※ laytout.tsx에 <html>과 <body>는 있는데 <head>가 없는이유
- metadata라는 정해진 이름의 변수 => 즉, 메타데이터에 의해 설정되거나, next.js로 인해 이면에서 자동으로 설정됨
※ components 폴더 위치: next.js 공식문서에서는 다양한 방법의 폴더구조를 소개함. 선호되는 것은 app 폴더 밖에 위치시키는 건데, 그러면 app 폴더를 라우팅과 그에 관련된 일에만 사용할 수 있기 때문임.
※ next.js의 보호된 파일명: 이 파일명들은 app 폴더 내부에서 생성될 때만 특별한 역할을 하며, app 폴더 외부에서는 특별한 방식으로 처리되지 않음.
- page.js: 신규 페이지 생성
- layout.js: 형제 및 중첩 페이지를 감싸는 신규 레이아웃 생성
- not-found.js: Not Found 오류에 대한 폴백 페이지
- error.js 기타 오류에 대한 폴백 페이지
- loading.js: 형제 또는 중첩 페이지(또는 레이아웃)가 데이터를 가져오는 동안 표시되는 폴백 페이지
- route.js: API 경로 생성(즉, JSX 코드가 아닌 데이터를 반환하는 페이지, 예시: json 형식)