[Next.js13] 2023. 새로운 next

create-next-app으로 프로젝트를 새로 만드는데 

App router(recommend)라는 cli옵션이 있었다.

아무 생각 없이 Y를 누르고 프로젝트가 생성되기 기다렸다.....

 

---

컴포넌트 구조가 기존에는 app/pages, app/styles였다면 이번에는 바로 src/app으로 통일되어있었다.

 

이제서야 찾아본 나. 반성하는 중이다...

 

---

next.js가 13버전으로 업데이트 되면서 라우팅 방식이 바뀐 것이다.

그리고 여러가지 바뀐 점이 있는데..

 

1. Layout

과거의 프로젝트에서는 따로 Layout.tsx로 파일을 만들고 _app.tsx에 제일 상단에 적용했다.

import Layout from "@/components/utils/Layout";

export default function App({ Component, pageProps }: AppProps) {
    <>
          <Layout>
              <Component {...pageProps} />
          </Layout>
    </>
  );
}

이런식으로...!!

하지만 이제는 그럴 필요 없다!!

streaming

중첩된 레이아웃을 사용하면 특별히 데이터가 필요하지 않은 페이지 부분을 즉시 렌더링하고 데이터를 가져오는 페이지 부분에 대한 loading상태를 표시할 수 있다. 이 방식을 사용하면 사용자가 전체 화면이 로드될 때 까지 기다릴 필요가 없다!

Data Fetching

이제는 getStaticProps로 데이터를 받아오지 않아도 된다.

 

Turbopack

엄청 빠른 속도의 번들링 속도!

next/Image

그동안 Image컴포넌트를 사용하려면 width, height값을 적용했어야하는데 next.js 13에서는 자동으로 해준다

 

@next/font

새로운 글꼴 시스템 도입으로 성능 향상 뿐 아니라 구글 폰트를 편리하게 사용할 수 있다

 

next/link

더이상 <Link></Link>사이에 <a>가 필요하지 않다!

 

OG Image Generation

 @vercel/og를 사용하여 동적 소셜 카드를 생성하기 위해 Next.js와 원활하게 작동하는 새로운 라이브러리가 생겼다.

 

Middleware API Updates

더 나은 미들웨어 API

 

등등 다양한 업데이트가 되었다!!

 

 

 

https://nextjs.org/blog/next-13

Next.js 13

https://nextjs.org/blog/next-13-4

Next.js 13.4

https://nextjs.org/docs/getting-started/react-essentials

Getting Started: React Essentials | Next.js

배포된 예시로 쉽게 확인해보기

https://app-dir.vercel.app/

Next.js App Router

개발자는 항상 새로운 기술을 익히고 적용할 줄 알아야한다!