NEXTJS 13 정리
13버전부터는 모든 React 컴포넌트는 서버사이드 컴포넌트입니다.
app 디렉토리
v12 : pages 폴더 하위의 모든 파일들이 하나의 경로였습니다.
v13 : app/ 이라는 디렉토리가 만들어졌습니다. 그리고 아래의 컴포넌트 들을 구성할 수 있습니다.
12버전의 pages 와 별 다를것 없어보이지만 app 디렉토리를 사용하면 디렉토리 구조도 깔끔해지고
layout, React 서버 컴포넌트, 스트리밍의 여러가지 기능이 존재합니다.
layout.tsx
- 기존 pages 폴더 밑에 있던 _app.tsx 파일과 _document.tsx 파일의 역할을 합니다.
- app 폴더 밑에 이렇게 꼭 한 개의 layout.tsx 파일이 있어야 합니다.
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<head />
<body>{children}</body>
</html>
)
}
head.tsx
- app 폴더에 있는 layout.tsx 파일을 이용하면 Header 파일 지정
- 각 라우팅마다 title을 다르게 할 수 있어 해당 라우팅의 메타 정보를 지정가능
- 달라진점 : 기존 12 버전에서는 라우팅이 됬었지만, app 폴더 밑에 Header.tsx 파일을 만들어도 /header 경로로 라우팅 되지 않습니다.
- 13 버전부터는 무조건 폴더 밑에 있는 page.tsx 파일이 첫 번째로 읽히는 파일이 됩니다.
export default function Head() {
return (
<>
<title></title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="icon" href="/favicon.ico" />
</>
)
}
Data Fetching
- React Suspense 기반으로 구현 된 새로운 data fetching 방식
- 기존에는 함수를 별도로 export하면서 서버사이드 단에서 돌아가는 로직을 구현했다면
- 13에서는 그런 방법을 사용하지 않으며 서버사이드 로직을 구현할 수 있습니다.
v12 : getServerSideProps, getStaticProps
v13
// This request should be cached until manually invalidated.
// Similar to `getStaticProps`.
// `force-cache` is the default and can be omitted.
fetch(URL, { cache: 'force-cache' });
// This request should be refetched on every request.
// Similar to `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
// This request should be cached with a lifetime of 10 seconds.
// Similar to `getStaticProps` with the `revalidate` option.
fetch(URL, { next: { revalidate: 10 } });
- 'force-cache' : 디폴트 값
- 캐시를 강제한다는 뜻이기 때문에 정적 사이트로 만들라는 의미
- 원칙은 처음은 서버사이드로 작동하고 두 번째부터는 캐시 된 값을 불러오는 형식입니다
- 'no-store' 옵션
- 캐시를 만들지 말라는 뜻으로 무조건 서버사이드로 작동하라는 뜻입니다.
- 'no-cache'도 같은 뜻으로 쓰입니다.
- revalidate 옵션
- ISR로 revalidate :10은 10초마다 캐시를 갱신한다는 뜻입니다장점
- SEO 에 유리합니다.
- SSG와 동일하게 ISR도 페이지를 미리 렌더링하고 캐시하기 때문에 매우 굉장히 빠릅니다.
- 내용 변경되어도 사이트를 다시 배포할 필요가 없습니다.
- export async function getStaticProps() { return { props: { hello:'world' }, revalidate: 20, }; }
- 이전의 getStaticProps 함수에서 revalidate prop을 추가하면 됩니다.
- 이상적으로는 콘텐츠가 동적이지만 자주 변경되지 않는 사이트인 경우 ISR을 사용하는 것이 좋습니다. 그 예시로는 블로그나 개인 웹사이트가 있습니다.
- ISR에는 한 가지 큰 단점이 있는데, 콘텐츠가 변경된 후에 사이트를 방문하게 되어도 이전의 콘텐츠를 보게 됩니다.
- ISR, Incremental Static Regeneration 이란 모든 static 페이지를 다시 빌드하는 것 이 아니라 특정 페이지만, 다시 빌드하게 만드는 기능입니다.
- ISR로 revalidate :10은 10초마다 캐시를 갱신한다는 뜻입니다장점
Turbopack
Rust 기반의 새로운 번들러
Next.js의 공식문서에서는 기존에 사용하던 webpack 보다 700배나 빠르다고 설명되어있다.
기존 webpack은 최대 성능의 한계에 도달했고 vite보다 10배가 빠르다.
font 최적화 (next/font)
- 커스텀 폰트를 포함하여 글꼴을 자동으로 최적화
- 개인 정보 보호 및 성능 향상을 위해 외부 네트워크 요청 제거
- 모든 글꼴 파일에 대한 자체 호스팅
- css의 size-adjust 프로퍼티를 이용한 Layout shift 요소 제거
[ 구글폰트 ]
import { Inter } from '@next/font/google';
const inter = Inter();
<html className={inter.className}>
[ 커스텀폰트 ]
커스텀폰트 역시 자동 호스팅, 캐싱 및 글꼴 파일 사전 다운로드를 지원합니다.
import localFont from '@next/font/local';
const myFont = localFont({ src: './my-font.woff2' });
<html className={myFont.className}>
next/link
<Link>는 항상 <a>를 렌더링 하고 기본태그에 props를 전달할 수 있습니다.
v12
import Link from 'next/link'
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
<a>About</a>
</Link>
v13
import Link from 'next/link'
// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
About
</Link>
참고
https://hoopiler.tistory.com/m/35
https://velog.io/@yoosion030/Next.js-13-정리-2
https://www.youtube.com/watch?v=5BRFGMs1v_o
https://mycodings.fly.dev/blog/2022-11-14-nextjs-13-first-look-and-layout
