Next 15가 나왔군..

원래라면 100%여야 하는데 Next 15용 강의가 추가됐다ㅎㅎ

 

완강을 위해 다 들어야겠다.

 

 

 

 

Next 15에서 달라진 점

- 공식문서로 역시나 제공해준다..

https://nextjs.org/docs/app/building-your-application/upgrading/version-15

Upgrading: Version 15 | Next.js

 

여기서 Breaking Change는 크게 바뀐 부분이라는 뜻이니 잘 살펴보자.

 

 

 

바뀐 점

1. headers, cookies, params, searchParams 와 같은 Request data는 asynchronous 되었다.

import { cookies } from 'next/headers'
 
// Before
const cookieStore = cookies()
const token = cookieStore.get('token')
 
// After
const cookieStore = await cookies()
const token = cookieStore.get('token')

 

// Before
type Params = { slug: string }
 
export function generateMetadata({ params }: { params: Params }) {
  const { slug } = params
}

// After
type Params = Promise<{ slug: string }>
 
export async function generateMetadata({ params }: { params: Params }) {
  const { slug } = await params
}

 

 

 

그리고 클라이언트 컴포넌트에서 사용할 때에는 React.use()를 사용해야 한다.

이말인 즉, Next 15를 사용할 땐 React 19 버전과 함께 사용해야한다는 의미!!

 

React.use: 프로미스를 처리해서 값을 얻어낼 수 있는 Hook

'use client'
 
// Before
type Params = { slug: string }
type SearchParams = { [key: string]: string | string[] | undefined }
 
export default function Page({
  params,
  searchParams,
}: {
  params: Params
  searchParams: SearchParams
}) {
  const { slug } = params
  const { query } = searchParams
}
 
// After
import { use } from 'react'
 
type Params = Promise<{ slug: string }>
type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>
 
export default function Page(props: {
  params: Params
  searchParams: SearchParams
}) {
  const params = use(props.params)
  const searchParams = use(props.searchParams)
  const slug = params.slug
  const query = searchParams.query
}

 

 

2. 캐싱

 

2-1. API Route에서 GET은 기본적으로 캐싱이 됐었다.

근데 그 기본 캐싱이 풀리고, 필요 시에만 캐싱을 적용하게 변경되었다.

공식문서 캡쳐

그래서 캐싱을 적용하려면 export const dynamic = 'force-static' 을 명시적으로 추가해야 한다.

 

default 옵션을 바꾸다니..

앞으로 명시적으로 옵션을 적어줘야 하나보다!!

 

 

2-2. Client Router Cache도 기본 30초였는데 없어졌다.

기존에 사용하던 캐싱을 그대로 적용하려면 config 파일을 수정하라고 한다.

 

 

2-3. fetch의 cache 기본 옵션이 force-cache에서 no-store로 바뀌었다.

따라서 fetch 사용하면서 캐싱 적용하려면 옵션에 cache: force-cache 라고 명시해야 한다.

 

 

 

3. React 19 버전 적극 사용

Next 15는 React 19와 함께 사용되기 때문에 React 19에 새로 추가된 기능을 자유롭게 쓰자-!

 

 

 

4. after (Hook)

 서버 컴포넌트 에서 화면 렌더링 후 부가적인 작업을 처리해야 할 때 사용하면 된다.

(예: 구글 애널리틱스에 데이터 전송, 로깅 작업)

import { after } from 'next/server'
// Custom logging function
import { log } from '@/app/utils'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  after(() => {
    // Execute after the layout is rendered and sent to the user
    log()
  })
  return <>{children}</>
}

 

 

5. Form 컴포넌트 추가

https://nextjs.org/docs/app/api-reference/components/form

Components: <Form> | Next.js

 

기존에 자주 사용했던 형태

<form action={function} /> (보통 POST 요청에 쓰임)

 

String Action Form

<Form action='/search' /> --> GET 요청 시 사용가능

 

- 보통 form 태그 사용해서 submit 하면 페이지가 새로고침 되는데, e.preventDefault()를 통해 막아주었다. Form 태그는 이를 자동으로 처리해준다.

- 그리고 action=에 써주었던 이동할 페이지를 prefetch 한다. (다음으로 넘어갈 페이지를 미리 다운로드 받아둔다.) 잠깐의 렉이 사라진다. (좀 더 자연스러운 UI)

 

<input name="q" /> --> "keyword"라고 입력했다면

페이지가 /search?q=keyword 로 이동하게 된다.

 

검색 페이지에서 사용하면 될 것 같다!!

 

 

 

6. next.config.ts 지원

NextConfig 타입을 사용할 수 있다.

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  /* config options here */
}
 
export default nextConfig

 

 

 

그 외에 마이너한 것들도 수정된게 있다.

 

 

 

@next/codemod 사용하면 15로 마이그레이션을 편하게 할 수 있도록 도와준다고 한다.

하지만 충돌도 좀 있을 수 있기 때문에

충돌난 부분은 자체 수리 해야함!

 

 

 

완강!!