현재 npx create-next-app@latest 로 nextjs 세팅 시 버전이 15버전이 설치가 되고 있습니다.
15버전으로 강의를 듣다 보면 에러가 나는 부분이 있어 15버전으로 수강하실 분들은 필수적으로 확인해주세요!
next/headers 의 cookies 가 비동기로 변경 됨에 따라 아래와 같이 사용해주셔야합니다.
import { cookies } from 'next/headers'
// Before
const cookieStore = cookies()
const token = cookieStore.get('token')
// After
const cookieStore = await cookies()
const token = cookieStore.get('token')출처: https://nextjs.org/docs/app/building-your-application/upgrading/version-15#cookies
layout. page, route handler 에 들어오는 params 역시 비동기로 변경 되었습니다.
// Before
type Params = { slug: string }
type SearchParams = { [key: string]: string | string[] | undefined }
export default async function Page({
params, searchParams,}: {
params: Params searchParams: SearchParams
}) {
const { slug } = params
const { query } = searchParams
}
// After
type Params = Promise<{ slug: string }>type
SearchParams = Promise<{ [key: string]: string | string[] | undefined }>
export default async function Page(props: {
params: Params
searchParams: SearchParams
}) {
const params = await props.params
const searchParams = await props.searchParams
const slug = params.slug
const query = searchParams.query
}출처: https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-page
useFormState -> useActionState 로 변경
// Before
const [error, action] = useFormState(login, undefined);
// After
const [error, action, isPending] = useActionState(login, undefined);추가로 useActionState의 세번째 리턴 값에 isPending이 있기 때문에 useActionStatus를 사용하지 않고 3번재 리턴 값을 사용하셔도 무방합니다.
기타 수정사항
console.error 시 브라우저에 error로 노출되어 log로 수정
Sheet 컴포넌트에서 SheetTitle 없을 시 error가 나와 SheeTitle 추가 후 VisuallyHidden 으로 감싸서 hidden 처리
npm install @radix-ui/react-visually-hidden 설치 필요
실행 시 tsconfig target 관련 warning 이 나온다면 target -> 2020 으로 상향
위의 모든 변경 사항은 아래 github 에서 확인 가능합니다. 참고해주세요!
https://github.com/eatcoding6/chatgpt-clone/commit/0d2cab8dad7292038da6cc8659a8f31ac9743c65#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R22