고정 헤더 영역
상세 컨텐츠
본문
반응형
NextJS는 pages 디렉토리와 app 디랙토리 둘다에서 작동하도록, version 13으로 업그레이드를 권장하고 있으며, 점진적으로 기존의 개발환경은 pages 에서 app 중심으로 바뀌어 갈 것을 예고하고 있습니다. 이후 버젼에서는 pages 디랙토리는 디폴트 환경이 아닙니다.
- App Route는 app 이라는 새로운 디랙토리안에서 작동합니다.
- App Route는 shared layouts, nested routing, loading states, error handling 등을 지원하는 React Server Components 위에 설계되었으며, 따라서 Server Side Randering이 디폴트입니다.
- App Router는 Page Router 보다 우선합니다. ( 이전 버젼의 pages 디랙토리를 병행하는 경우 )
- 폴더는 파일시스템에 기반을 둔 패스(path)이며, 파일은 최종 UI를 만듭니다. (file-system based router)
1. Updraging 권장
- minimum Node.js version : v16.8
- Next Version to 13 : > npm install next@latest react@latest react-dom@latest
- ESLint Version : npm install -D eslint-config-next@latest
2. app 디랙토리 구조 ( 디폴트 )
- favicon.ico : favicon.ico 은 주소 표시줄에 사용되는 작은 그래픽 아이콘입니다.
- global.css : 모든 layout, page 및 component 의 스타일에 영향을 줍니다.
- layout.tsx: 모든 page (sub-page 포함), component 및 sub-layout 를 감싸는, RootLayout 함수를 포함하며, 이전 버젼의 _app.js 를 대체함. RootLayout함수에는 반드시 return문에는 <html />, <body/> 는 포함하여야 합니다. 또한 metadata 객체를 이용하여 title 및 description 을 설정하여 SEO 최적화를 수행합니다. 이후 서브디랙토리 안의 layout은 root명을 사용하지 않으며, return문에도 <html />, <body/>를 사용하고, <div /> 또는 <section /> 을 사용합니다.
- page.tsx : 사실상 루트주소( / )이며, 관련 디랙토리의 UI로, 첫 페이지 입니다. page.tsx는 모든 디랙토리 안에서 같은 이름으로 존재하지만 충돌은 없습니다. 디랙토리안에 page.tsx 파일이 없으면 접근이 불가능합니다.
( app 디랙토리안에 필요한 서브폴더를 만들고, 관련 layout, page 등을 설치면, 자동으로 file-base routing이 실현 됨)
3. 주요 파일 규칙 ( File Conventions )
- .js, .jsx, or .tsx 파일 확장자는 사용 가능합니다.
- layout : 모든 하위 페이지에서 공유되는 내용의 UI
- page : 디랙토리내의 유일한 페이지이며 공개적으로 접근 가능
- loading : 로딩 컴포넌트 UI
- not-found : 일치하는 주소가 없을 때 표시되는, Not-found UI
- error : 에러발생시에 표시되는 페이지
- global-error : 전역적인 에러표시 UI
- route : Server-side API endpoint
'Next.js' 카테고리의 다른 글
| Next.JS 프로젝트 설계 ( II ) (0) | 2023.06.05 |
|---|---|
| Next.JS 프로젝트 설계 ( I ) (0) | 2023.06.05 |
| [ ], ( ), @ - Next.js 폴더에 등장하는 특수 기호 (1) | 2023.06.05 |
| next.js 설치 옵션 - Next 13.4 (1) | 2023.06.05 |
| npx create-react-app 소멸 (2) | 2023.06.04 |
