Next.js 14 Release!

Nextjs 13 과 비교해서 문법, 구조가 바뀐것은 없습니다.

1. Turbopack 을 이용해서 빠른 개발을 할 수 있게 되었습니다.

로컬 서버 시작, 코드업데이트시 더 빠른 새로고침을 지원합니다.

로컬 서버 시작 속도가 최대 53% 가 빨라지며, 업데이트는 94% 향상되었습니다.

npx create-next-app@latest // next.js 14

2. Server Actions 안정화

use client, user server 의 기능이 기존 alpha 에서 stable 로 업데이트 되었습니다.

아래는 공식문서 예제 입니다.

export default function ServerComponent() {
  async function myAction() {
    'use server'
    // ...
  }
}

'use server'
 
export async function myAction() {
  // ...
}

'use client'
 
import { myAction } from './actions'
 
export default function ClientComponent() {
  return (
    <form action={myAction}>
      <button type="submit">Add to Cart</button>
    </form>
  )
}

3. Partial Prerendering (Preview)

SSR 과 SSG 의 장점을 결합(빠른 초기 응답 + 동적 콘텐츠 스트리밍)하여 렌더링 프로세스를 초기화 해주는 기능을 체험할 수 있습니다.

https://nextjs.org/blog/next-14#partial-prerendering-preview

4. 메타데이터 개선

- viewport, colorScheme, themeColor 삭제 예정

- viewport 대신 generateViewport 대체 추가

 

Next.js14 Release

https://nextjs.org/learn

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