Next.js 13 신버전
출처: [Youtube] 코딩애플: Next.js 13 신버전 발표회 요약
참고(Netx.js): https://nextjs.org/blog/next-13
Next.js
서버에서 리액트 문법을 사용할 수 있도록 해주는 백엔드 프레임워크
리액트 문법쓰는 프론트 + 백엔드 프레임워크
Next.js 신버전 (Beta)
- Turbopack 출시
- React Server Components
- <Image /> 개선
- html streaming
- font 최적화
- Nested Layout
- OG 자동생성
Next.js 12 | Next.js 13 |
pages 폴더 | app 폴더 |
getStaticProps | use() |
getServerSideProps | fetch() |
아직까지는 예전 문법도 병행해서 쓸 수 있으므로 가능하지만, 정식 출시 이후 13으로 아예 바뀔 경우 문법을 다시 공부해야할 것 같다.
버전 비교
- 12 버전에서는 pages 폴더 내부에 페이지를 만들었는데, 13 버전부터는 app 폴더 하위에 페이지를 만들어서 제작한다.
- page.js 예약 파일을 통해 기본 페이지를 제작한다.
// app/page.js
// This file maps to the index route (/)
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
- layout.js 파일 예약 파일
여러 페이지간 UI를 공유하는 파일이다.하위 컴포넌트에서 재사용이 가능하여 레이아웃은 상태를 유지하고, 리렌더링 하지 않는다. layout 에 navbar, footer 등을 넣어주면 된다.
// app/blog/layout.js
export default function BlogLayout({ children }) {
return <section>{children}</section>;
}
- 서버와 통신 중 로딩 상태일 때를 나타내는 로딩중 UI를 띄우고 싶은 경우 loading.js 라는 이름의 예약 파일에 넣어주면된다.
- React Server Component
서버에서 데이터를 가져올때 getStaticProps(), getServerSideProps() 등을 썼었는데, 이제는 데이터를 가져오는 함수를 짠 뒤, 해당 API 함수를 쓸 때 use() 안에 API 함수를 넣어주면 된다.
import { use } from 'react';
export default function Page() {
let a = use(가져와())
return (
<div>메인 페이지 {a.todo}</div>
)
}
export async function 가져와() {
const res = await fetch('https://dummyjson.com/todos/1')
const data = await.res.json()
return data;
}
fetch 문법을 작성할 때 다음과 같은 옵션을 추가해줄 수 있는데, 이는 getServerSideProps() 와 유사하게 동작시킬 수 있다.
const res = awiat fetch('https://dummyjson.com/todos/1', {cache: 'no-store'})
// 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 } });
- <Image />
Image 컴포넌트를 이용해서 이미지를 삽입하여 이미지를 최적화 시킨다.
import Image from 'next/image';
import avatar from './lee.png';
export default function Page() {
return(
<diV>
<Image src={avatar}></Image>
</div>
)
}
이미지 로딩 시 이미지 로드가 늦어져 이미지 밑에 있던 레이아웃이 밀려나는 현상인 Layout Shift가 발생하는 경우 레이아웃을 다시 그려야 하기 때문에 페이지 로딩 지연으로 이어지게 된다.
이미지 로드 시 Layout Shift로 인한 페이지 로딩성능 하락을 방지하기 위해 폭과 이미지 높이를 미리 설정해주어야 하는데, Next.js 의 <Image>를 쓰면 알아서 처리해준다.
- font 최적화
폰트 로드가 늦어져서 Layout Shift가 발생하는 경우도 있다.
이것 또한 Next.js 신버전에서 해결할 수 있는 문법들을 제공하고 있다.
- 링크
<Link>를 사용할 때 내부에 <a> 태그를 꼭 넣어주었어야 했는데, 13버전부터는 자체적으로 포함하여 렌더링하고 있기 때문에 넣어주지 않아도 된다.
import Link from 'next/link'
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
<a>About</a>
</Link>
// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
About
</Link>
단점
1. 예약된 파일들 사용이 늘어났다.
- layout.js
- page.js
- loading.js
- error.js
- template.js
👉 파일 구조가 더러워질 것 같음
2. HTML (정적 페이지)렌더링은 잘하지만, websocket, webRTC 이런거 만들려면 귀찮음
3. 서버에서 데이터를 가져오는 것은 쉽지만, 유저 → 서버 데이터 보내기는 음..