Next.js App Router + NextAuth.js authOptions 오류 해결    상황Next.js App Router + NextAuth 강의를 들으면서 마지막에 빌드 & 배포 부분을 공부하는 중yarn build를 하니까 아래와 같은 에러가 나와서 스택 오버플로우랑 깃허브, 블로그를 아무리 뒤지고 바꿔도 해결이 안됐는데 정답을 알고나니 허무해졌지만 다른분들은 나와 같은 고민을 안겪게 하고 싶기 때문에! (다 아실수도,,,) 이유아래 코드를 보다시피 authOptions를 따로 만들어줘서 NextAuth의 인수로 넣어주고도 있고 export해서 내보내주고도 있다.nextJs 13.4+ 에서는 /app/api/auth/[...nextauth]/route.ts는 route hanlder을 이..

Next.js App Router 페이지 생성 및 이동, 레이아웃 생성    페이지 생성 및 이동 - Next.js 에서는 폴더를 이용해서 nested routes를 생성합니다- 각 폴더에 위치한 page.tsx 파일은 라우트를 생성합니다.ex) /app/dashboard/page.tsx 파일은 /dashboard 경로를 생성합니다.  - page.js 파일을 제외한 파일들은 라우트가 생성되지 않기 때문에 관련된 컴포넌트 등의 파일을 해당 폴더 내에 함께 위치할 수 있습니다. 레이아웃 생성 Root layout- /app/layout.tsx 파일에 적용한 UI는 애플리케이션 내 모든 페이지에 적용됩니다.- 또한 root layout 파일을 metadata를 적용할 때도 사용할 수 있습니다. 페이지별 공통..

next/font 적용방법 1. @next/font Next.js 에서는 @next/font란 라이브러리를 설치하여 구글 폰트를 자유롭게 사용할 수 있습니다npm i @next/fontyarn add @next/font import { Jua } from "@next/font/google";const jua = Jua({ subsets: ["latin"], weight: ["400"] });export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( {children} );} 라이브러리에서 google font에 등록된 폰트를 가져와서 보여주는것이 ..

Client와 Server Component   Client Component- 클라이언트 컴포넌트 는, 버튼 또는 검색창과 같이 사용자와 상호작용하는 작은 UI 들을 클라이언트 단에서 렌더링되는 컴포넌트를 뜻합니다. (Client component는 어플리케이션에 client측 interactivity를 추가할 수 있게 합니다.)- Client component로 사용하고 싶다면 use client 선언문을 통해 변경할 수 있다.-  Next.js에선 이 컴포넌트들은 먼저 서버에서 pre-render 된 후 클라이언트에서 hydrate(JS가 실행되면서 interactive하게 됨)됩니다. 특징- interactivity, event listener(onClick 등)가 필요할때 - state 및 라이..