Next.js 13 달라진 점 (App router, Data fetching)

 

 

계속적으로 react만 쓰다보니 오랜만에 Next.js 쓰다가 바뀐 점이 보여 이에 대해서 서술하고자 한다.

1. 구성 요소 계층 변화

경로에서

• layout.js
• template.js
• error.js :(React 오류 경계)
• loading.js : (리액트 서스펜스 경계)
• not-found.js : (React 오류 경계)
• page.js

변경 전

중첩된 경로에서 세그먼트의 구성 요소는 부모 세그먼트의 구성 요소 안에 중첩된다 .

변경 후

2. 공동 배치

Next.js 12에서는 pages 디렉토리를 최상위 디렉토리로 가지고 있었다. 그 안에 파일들의 이름으로 url이 자동으로 라우팅되었다.

변경 전

지금은 Next.js에서 app 디렉토리를 최상위 디렉토리로 지정한다. 모든 파일들이 자동으로 라우팅되는 것이 아니라, 폴더 안에 page.js와 route.js라는 파일명을 가진 파일들만 라우팅된다.

변경 후

해당 폴더

위와 같이 device/page.js 파일이면 localhost:3000/device url로 열리게 된다.

3. Data Fetching 방식 변경

제일 충격먹었던게 data fetching 방식이다.

💡 Next.13부터는 getServerSideProps, getStaticProps, getStaticPaths 등의 서버 사이드 API가 더 이상 사용되지 않는다.

지금 내 경우에는 Next.js 14버전을 쓰고 있었는데, getServerSideProps을 쓰고자 했는데 계속적으로 적용이 안되었다.

그래서 내가 잘못 설정하고 있는 건가해서, 최상위의 page.js로 가서 적용해보니 아래와 같은 오류가 났다.

에러 문구

그래서 찾아보니 Next.js의 앱 라우터에서는 getServerSideProps를 지원하지 않는다는 뜻이다.

Next.js 13의 새로운 데이터 가져오기 기능은 fetch() 웹 API를 기반으로 구축  되었으며  서버 구성 요소에서  / 를  사용 asyncawait  합니다 .

getServerSideProps() 이제는 and 를  사용하는 대신  getStaticProps(),  모든 페치된 데이터는 기본적으로 정적입니다 . 즉, 빌드 시점에 렌더링 됩니다 .

그래서 이제 getServerSideProps와 getStaticProps를 사용하는 대신, 가져온 모든 데이터는 기본적으로 정적이며, 빌드 시에 렌더링된다고 한다.

대체

• { cache: 'force-cache' }getStaticProps
• next: { revalidate: 10 }getStaticProps
• { cache: 'no-store' }getServerSideProps

4. 메타데이터 생성

: 동적인 메타데이터를 생성하여 Metadata 객체를 리턴하는 함수를 의미한다.

게시물/[postId]/page.tsx

export async function generateMetadata({ params }: Props) {
  const { postId } = params; // 동적인 값 postId에 따라
  const post = await getPostData(postId); // 게시글(post) 데이터를 불러오고

  if (!post) {
    return {
      title: 'Post Not Found',
    };
  }

  return {
    title: post.title, // 메타데이터 객체에 title 값을 담아 리턴한다.
  };
}

게시글 페이지를 로드하면 아래처럼 게시글마다 다른 title을 가지고 있는 것을 확인할 수 있다.

👇🏻 참고 사이트

https://velog.io/@wlwl99/Next.js-12-Next.js-13-달라진-점-App-router-Data-fetching

https://nextjs.org/docs/app/building-your-application/routing#colocation