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 폴더 하위에 페이지를 만들어서 제작한다.

Next.js 12

Next.js 13

 

• 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. 서버에서 데이터를 가져오는 것은 쉽지만, 유저 → 서버 데이터 보내기는 음..