Note : Next.js 13버전에선 app/ directory를 사용한다.
생성된 파일 구조
1. Page
각각의 페이지는 파일의 이름으로 라우팅을 한다 :)
예를들어 pages폴더안에 about.tsx를 만들었다면
/about의 경로로 접근 할 수 있다.
2. 동적라우팅
Next.js는 동적 라우트를 제공하는데 예를들어 pages/posts/[id].js 를 만든다면
posts/1, posts/2 ... 등의 경로로 접근 할 수 있다.
3. Pre-rendering
Next.js는 HTML파일을 미리 생성한다. => SEO에 더 유리하다
브라우저에서 페이지가 로드될때 자바스크립트 코드가 작용하면서 인터랙티브하게 만드는데
이걸 하이드레이션이라고 부른다.
3. 프리렌더링의 두가지 형태
- Static Generation (추천함) : HTML이 빌드될때 생성된다. 그리고 요청에 따라 재사용할 수 있다.
- Server-side-Rendering : 각각의 요청할때 HTML이 생성된다.
4. data를 사용하는 Static Generation
외부 데이터를 프리렌더링 하기 위해서 fetching할때
두가지 경우가 있는데
- 페이지 content가 외부 데이터에 의존할때 : getStaticProps를 사용해라
- 페이지의 경로가 외부 데이터에 의존할때 : getStaticPaths(대개는 getStaticProps도 같이 쓴다)
혼자 공부하면서 번역한거라 틀릴가능성 높음
틀리면 알려주세요🥺
'Frontend > Next.js' 카테고리의 다른 글
| 4. getServerSideProps (3) | 2023.02.16 |
|---|---|
| 3. Static Generation with data | 번역 (0) | 2023.02.16 |
| 1. Next.js 시작하기 (0) | 2023.02.15 |
| Next.js에서 페이지이동이 필요할때 | (0) | 2023.02.04 |
| _app.tsx , _document.tsx 차이를 알아보자 (0) | 2023.01.27 |