Next.js 13 새로운 점!
Post

Next.js 13 새로운 점!

26/10/2022 26/10/2022
Da-Bin Jeong
6

Next.js 13 새로운 점!

들어가기

  • Next.js 13이 새로 발표되었다! (는 이야기를 CTO님께 전해 들었다.)
  • 간단하게 바뀐 점을 확인!

app/ 디렉토리

  • 기존 Next.js에서는 pages/폴더를 통해 간단하게 라우팅을 할 수 있었다.
  • 새로운 13버전에서는 app/폴더를 같이 사용할 수 있다. (베타 버전)

app/ 폴더에서 기존 처럼 pages/ 폴더 처럼 사용하려면 원하는 폴더에 page.js를 만들면 된다.

  • https://mydomain/ 페이지를 만들고 싶으면 pages/page.js를 만들면 되고,
  • https://mydomain/login/ 페이지를 만들고 싶으면 pages/login/page.js를 만들면 된다.

레이아웃도 정의할 수 있다.

  • app/login/layout.js폴더에 레이아웃 컴포넌트를 만들면 그 폴더 안에 있는 page에 레이아웃이 삽입되는 것이다.
  • 여러 페이지에 적용하고 싶을 때는 가장 상위 폴더에 넣어주면 된다. 아래처럼!
  • app/website/layout.js 이렇게 넣어두면 app/website/class/page.js, app/website/ticket/page.js
  • (이제 components/layout 폴더 안 만들어도 되겠다~! 오예~!😁)
  • (Next.js로 폴더 구성할 때 Page에 관련된 컴포넌트 분리할 때 pages/board와 components/board 이렇게 폴더가 나뉘어 지게 되어서 복잡했는데 아주 좋다.)

스트리밍! (로딩 )

  • 스트리밍만 봤을 때는 무슨 말인지 잘 이해가 안 되었었는데
  • app/login/loading.js 처럼 원하는 라우팅 폴더에 loading 파일을 둘 수 있다.
  • 해당 컴포넌트의 콘텐츠가 로딩되는 동안 loading.js 컴포넌트를 출력한다.
  • Instant Loading States라는 페이지에서 자세히 설명해 주고 있는데,
  • layout.js와 page.js아래 하위 항목을 <Suspense>로 감싸주면 적용할 수 있다.
1
2
3
4
5
6
7

<Layout>
    <Header />
    <SideNav />
    <Suspense fallback={<Loading />}>
        <Page />
    </Suspense>
</Layout>

데이터 가져오기

웹팩보다 700배 빠른 Turbopack 알파 포함!

  • Next.js 13 버전에는 Rust 기반의 터보팩이 포함되어 있다고 하는데,
  • Webpack보다 700배 빠르다고 소개하고 있다.
  • 기존 프로젝트에 적용하면.. 나중에 얼마나 빨라질 지 기대가 된다.
  • 현재는 dev 서버 돌릴 때만 지원하고 나중에 빌드까지 지원할 예정이라고 한다.
  • 요로케 하면 된다. next dev --turbo

새로운 next/image

  • alt가 필수로 바뀌었다고 한다. (가끔 넣는 걸 잊어버릴 때가 있는데 오히려 잘 됐다!)
  • 성능 향상이 되었다고 한다.

글꼴 시스템 @next/font

  • 구글 글꼴을 쉽게 가져다 쓸 수 있다고 한다.
1
2
3
4
5

import { Inter } from '@next/font/google';

const inter = Inter();

<html className={inter.className}>

  • 요로케~!

  • 글꼴 파일 사전 로드, 사용자 정의 글꼴도 물론 지원된다고 한다.

1

const myFont = localFont({ src: './my-font.woff2' });
  • 오오오오!!
  • <a>태그 이제 안 넣어도 된다!
  • 기존 <a>를 넣었던 <Link>는 이제 next/legacy/image가 되었다.
  • 업그레이드 후 기존 next/link를 사용할 것이라면 import Link from 'next/link'가 아니라
  • import Link from 'next/legacy/image'
  • 새로운 next/link는 안에 <a>태그를 안 넣어도 된다. (편하다)

og 이미지 만들어주는 라이브러리도 추가되었다고 함

  • @vercel/og
  • (이건 링크로 대체)[https://nextjs.org/blog/next-13#og-image-generation]

이제 React 17은 안녕… ㅠㅠ

  • Next.js 13은 React 18.2부터 지원한다고 한다.
  • Node.js도 14로 상향

미들웨어 API도 업데이트 되었다고한다.

마치며

  • 업데이트를 자주하는 Next.js!
  • 이전보다 편의성이 많이 개선된 것 같고, 메뉴얼도 자세하게 설명되어 있어서 공부하면 할 수록 다른 것에 신경을 덜 쓰고 편하게 개발할 수 있도록 도와주는 좋은 프레임워크라고 다시 한 번 느꼈다.
  • 빨리 Turbopack이 더 적용되어서… 회사 프로젝트의 빌드 속도도 빠르게 해 주기를…
  • 개발자님들 파이팅, 나도 더 잘 사용할 수 있도록 공부하자… 파이팅…

Reference

TIL, Next.js