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/디렉토리에서 라우팅하려면 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..)은 다음 글에서 정리하겠습니다 :)
ㅗ