NEXT.js 14

진짜 너무 늦었다

14버전이 나왔다는데 13 버전도 제대로 확인 못한 1인...

부랴부랴 node 버전을 확인해보니 Lts 가 20.9.0이네..?   (너 언제 그렇게 높아졌니..?)

우선 node 버전을 NEXT.js 14 minimum 버전인 18이상으로 끌어올리기!!
(물론 저처럼 게으르지 않은 개발자분이시라면 확인만 하시죠..)

이상 글쓴이의 푸념은 각설하고 진짜 늦었으니 당장 시작해보자!

---

우선 Next에서 큰 꼭지로 4가지를 잡았다. (공식문서 링크 첨부)

🚀 Turbopack

💻 Server Actions (stable)

🪬 partial Prerendering (Preview)

📑 Next.js Learn 

 

---

🚀 Turbopack

최근 Next 문서를 확인해보셨던분이라면 알겠지만 핵심 키는 최적화와 속도향상 인것같다

Turbopack 또한 지난 13버전부터 도입을 시도했었다.

공식 문서 확인시 Rust로 작성되어 웹팩보다 700배 , Vite 보다 10배 빠르다고 작성되어있다.

이번 14버전에서의 터보팩은 App &Pages Router에 대한 5,000개의 테스트 통과하였고

로컬 서버 시작 속도가 53% 향상되었고 코드 수정과 Fast Refresh가 94% 향상되었다고 한다.

 

하지만 아직 90%의 테스트 결과이고 추후 100% 통과시에 stable로 배포 예정이라고한다.!

💻  Server Actions

13.4 버전에서 알파 버전으로 선보인 이후 14버전에 stable하게 적용된 사항

내가 이해한 바로는 기존 Next.js API Route를 조금더 편리하게 쓰는 용도..?

공식문서 코드로 확인해보자면 아래와 같다.

 

page.tsx

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>
  );
}

 

 

우선 기존과 다른점을 설명하라고 하면

Next.js API Routes에서 req , res 를 직접 사용해서 프론트에서 그에따른 처리가 필요했는데

위의 코드대로 한다고하면 매우매우 간단해졌다!

캐싱 , 재검증 , 리디렉션 등이 가능하다고 한다.

 

 

 

🪬 Partial Prerendering

Next.js는 부분 사전 렌더링 (빠른 초기 정적 응답을 갖춘 동적 콘텐츠에 대한 컴파일러 최적화) 를 진행하고 있다고한다.

 

이는 SSR (서버 측 렌더링) , SSG (정적 사이트 생성) , ISR (증분 정적 재검증) 을 기반으로 구축

 

Suspense를 활용해 fallback 부분을 사전 렌더링 시킨다.

 

 

 

📑 Next.js Learn

우선 나부터 배우러 가야겠다..

챕터가 16개로 이루어져 있다.

요것도 언젠가는 정리해야지.... 언젠가는... ㅎ



PS. 이슈가 있는 부분 백태클 거셔도 겸허히 수용하고 수정하도록하겠습니다.!

 

 

 

 

 

 

 

 

Next.js 14