Next.js App router 기반 Chat GPT 만들기

현재 npx create-next-app@latest 로 nextjs 세팅 시 버전이 15버전이 설치가 되고 있습니다.

15버전으로 강의를 듣다 보면 에러가 나는 부분이 있어 15버전으로 수강하실 분들은 필수적으로 확인해주세요!

1. 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

2. 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

3. 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 설치 필요

  • https://github.com/shadcn-ui/ui/issues/4302

• 실행 시 tsconfig target 관련 warning 이 나온다면 target -> 2020 으로 상향

위의 모든 변경 사항은 아래 github 에서 확인 가능합니다. 참고해주세요!
https://github.com/eatcoding6/chatgpt-clone/commit/0d2cab8dad7292038da6cc8659a8f31ac9743c65#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R22