Next.js 13 정리

유시온·2022년 10월 28일
48
post-thumbnail

2022년 10월 26일 수요일, Next.js Conf에서 Next.js 13을 발표했습니다. Next.js 12도 이제 막 공부하고 있는데 벌써 13이 나오다니... 아직 베타 버전이 많아 수정될 부분도 있을 것 같지만 늦기 전에 미리미리 공부하는 게 낫겠죠?

아무튼 Next.js 공식문서를 보면서 Next.js 13에서 추가된 점을 정리해보았습니다. 잘못된 내용이 있다면 피드백 부탁드립니다.

한 줄 정리

Next.js Conf에서 발표한 바와 같이 Next.js 13은 제한 없이 동적으로 작동할 수 있는 토대를 마련합니다.

  • app/디렉토리(Beta)
    • 레이아웃
    • React 서버 컴포넌트
    • 스트리밍
  • Turbopack(alpha)
  • next/image(안정적)
  • @next/font(beta)
  • 상향된 next/link

Update 된 Nextjs를 사용하고 싶다면?

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

이렇게 설치해주시면 됩니다.

app/Directory

Next.js에서 가장 사랑받는 기능 중 하나는 파일 시스템 라우터입니다. 폴더 안에 파일을 생성하면 애플리케이션에서 즉시 경로를 생성할 수 있는 기능이죠.

오늘날 Next.js 13에서는 app/디렉토리를 도입하여 Next.js의 라우팅 및 레이아웃 경험을 개선하고 있습니다. 새 라우터는 다음을 지원합니다.

  • 레이아웃: 경로 간에 UI를 쉽게 공유할 수 있게합니다.
  • 스트리밍: 로딩 상태를 표시하고 렌더링되는 UI 단위로 스트리밍합니다.
  • 서버 컴포넌트
  • 데이터 가져오기

아직 app/디렉토리는 베타 버전으로 지원이 되고 있으며, 현재는 pages 디렉토리와 함께 공존할 수 있지만, 점진적으로 app/디렉토리만 사용되는 것으로 채택될 수 있다고 합니다.

App

레이아웃

app/ 디렉토리는 복잡한 인터페이스 배치하는 것을 쉽게 만들어주고, 값비싼 재렌더링을 방지해주고, 라우팅 패턴을 가능하게 합니다. 게다가, 레이아웃을 중첩할 수 있고, 컴포넌트, 테스트 및 스타일과 같은 경로와 함께 애플리케이션 코드를 함께 배치할 수 있습니다.

app/디렉토리에서 라우팅하려면 page.js라는 단일 파일이 필요합니다.

Before

// pages/index.js
// This file maps to the index route (/)
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

After(next.js 13)

// app/page.js
// This file maps to the index route (/)
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

그런 다음 파일 시스템을 통해 레이아웃을 정의할 수 있습니다.
레이아웃은 여러 페이지 간에 UI를 공유할 수 있습니다. 다시 렌더링하지 않고 레이아웃 상태를 유지하고 상호작용합니다.

프로젝트 실습으로 레이아웃 적용하기

app 디렉토리를 사용하기 위해 프로젝트를 생성해주었습니다.

yarn create next-app
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest

처음 프로젝트 생성했을 때 아래와 같은 오류가 났습니다. 똑같은 오류가 난다면 babel 설정을 해주어야 합니다.

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": []
}
// .eslintrc.json
{
  "extends": ["next/babel", "next/core-web-vitals"]
}

그리고 추가로 app 디렉토리를 사용하려면 next.config.js에 추가 설정을 해주어야 합니다.

// next.config.js
const nextConfig = {
	...
  experimental: { appDir: true }, <-- 이부분 추가 !
};

초기 세팅을 마친 후 프로젝트를 app/ 디렉토리에 파일을 만들어 실행시켜줍니다.
실행시키면 터미널에

Your page app/page.js did not have a root layout, we created app/layout.js for you.

라는 문구와 함께 layout.js 파일이 생성된걸 볼 수 있습니다!!

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <title>Next.js 13</title>
      </head>

      <body>
        <nav>Next.js 13</nav>
        {children}
      </body>
    </html>
  );
}

이렇게 레이아웃을 추가해준다면

title과 nav가 page.js에 적용이 된 것을 볼 수 있습니다.

// app/about/page.js

const about = () => {
  return <div>about!!</div>;
};

export default about;

추가로 about 페이지도 만들어보겠습니다.

about 역시 레이아웃이 적용된 것을 볼 수 있습니다.
만약 about에만 적용하는 layout을 생성하고 싶다면 app/about/layout.js 파일을 만들면 되겠죠?

Next.js 13에서 새롭게 추가된 Layout에 대해 알아보았습니다.
더 자세한 예제는 아래 링크를 통해 찾아볼 수 있습니다.

예제 링크
예제 깃허브 링크

분량이 생각보다 길어져 나머지 내용(next/image, @next/font..)은 다음 글에서 정리하겠습니다 :)

profile
프론트엔드를 좋아하는 평범한 주니어 개발자입니다!

2개의 댓글

comment-user-thumbnail
2022년 11월 3일

1개의 답글