[Next.js] Next 14, 달라진 점

 

13으로 개발을 한 지 1년도 채 되지 않았는데, 프로젝트가 끝나자 마자 14가 발표됐다. 

출시된 지 몇달 되긴 했지만 이번에 14버전을 사용해서 프로젝트를 진행할 예정이라 달라진 점을 하나씩 살펴봤다.

 

Next.js 13, App Router

우선 13으로 넘어오면서 App Router가 등장하게 되면서 라우팅 방식이 완전히 달라졌다.

이전에는 라우팅을 위한 파일을 pages 폴더 내부에 생성했다. 내부에 생성한 파일명에 따라 사이트 주소가 설정되던 규칙도 바뀌었다. 

 

Page Router에서 App Router로 바뀌면서 _document, _app이 사라지고 디렉토리 단위로 적용되는 layout 개념이 생겼다.

예를 들어 /pages/page.tsx를 만들면 url은 /page로 되었다. 하지만 변경 후에 layout이 기본적으로 사용되면서 /pages/page.tsx를 만들면 url은 /이 되는 등 디렉토리 구조와 파일 규칙이 달라졌다.

---

Next.js 14

컴파일러 성능 향상

Rust 엔진 터보팩 검증을 위해 테스트가 90% 통과되어 next dev -turbo를 사용하면 더 빠르고 안정적인 성능을 경험할 수 있다고 한다. 테스트 통과율이 100%에 도달하면 터보팩을 stable 버전으로 전환할 예정이다. 

 

공식 블로그에서는 이를 가장 첫번째로 꼽았지만, 아래에서 살펴볼 것들이 아마 우리에겐 더 와닿을 듯하다.

 

메타데이터

App Router에서는 메타데이터를 레이아웃과 페이지에 따로 작성한다. viewport, colorScheme, themeColor 등 모두 Metadata에서 설정해서 사용해야했다.

하지만 Next.js 14부터 사용자 경험 개선을 위해 viewport, colorScheme, themeColor 정보는 Metadata 타입과 분리되어 별도로 정의해야한다. 나머지 옵션들은 그대로 유지된다.

 

Server Action 안정화

server action을 통해 API 라우터를 별도로 생성하지 않아도 된다. 

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

'use server'를 작성해두면 함수 내용을 자동으로 서버 API로 만들어주고, 개발자는 코드 노출 걱정 없이 데이터베이스를 관리할 수 있다.

Partial Prerendering

처음 페이지를 불러올 때 정적인 컨텐츠를 미리 제공하는 방식이다.

14버전에 적용하는 작업을 진행중이라 한다. (아직은 프리뷰)

---

 

공식 블로그도 참고하고, 여러 자료를 찾아봤는데 아직 사용하지 않고서는 메타데이터 외에 큰 차이를 느끼지 못하겠다. 사실 터보팩 향상같은 것들은 내가 경험하기 쉬운 것들인가 싶기도 하고, 아직은 아리송하다.

 

다만, 이전 프로젝트에서 13버전을 사용했지만 그 당시에도 layout이 없는 버전을 사용했던 터라, 이번에 늦게나마 layout 변화를 실감하고 있다.

 

 

 

 

출처 : 

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

https://velog.io/@mjieun/Next.js-Next.js-14-%EB%B2%84%EC%A0%84-%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD