NextAuth.js 소개 Next.js 프로젝트에서 인증 시스템을 구축하는 것은 많은 개발자들에게 중요한 과제 중 하나입니다. 이 과제를 해결하기 위해 많은 개발자들이 Next-Auth 라이브러리를 선택하고 있습니다. 이 포스팅에서는 Next-Auth의 장단점, 사용 이유, 직접 구현과의 비교, 동작 원리, 그리고 간단한 사용법 예제를 소개하려 합니다. 1. Next-Auth의 장단점 장점 간편한 설정: Next-Auth를 사용하면 몇 줄의 코드만으로도 강력한 인증 시스템을 구축할 수 있습니다. 다양한 인증 공급자 지원: 소셜 로그인을 비롯한 다양한 인증 방식을 쉽게 통합할 수 있습니다. 보안: 자체적으로 세션 관리 및 JWT 토큰을 사용하여 보안성을 강화합니다. Next.js와의 완벽한 통합: 서버사..
next.js 프로젝트 next.js app을 jenkins + harbor + docker 조합으로 ubuntu 서버에 배포 하는 설정입니다. jenkins에 설정된 github branch에 머지 되면 jenkins에서 shell이 실행되도록 합니다. next.js 앱을 빌드하고 도커 이미지로 빌드합니다. 1. Dockerfile 작성 docker 이미지로 빌드될 명령어 # 기본 이미지 설정 FROM node:18 # 작업 디렉토리 설정 WORKDIR /app # 의존성 파일 복사 COPY package.json yarn.lock ./ # 의존성 설치 RUN yarn install --frozen-lockfile # 애플리케이션 파일 복사 COPY . . # Next.js 빌드 RUN yarn bui..
next.js 14 app router next.js 14에서는 기존 pages라는 폴더 기반의 라우팅에서 app router로 변경되었다. next.js 서버에서 custom api를 작성하는 방법에도 약간의 변화가 있기 때문에 이에 대해서 공유한다. export const dynamic = 'force-dynamic' // defaults to auto export async function GET(request: Request) {} app/api/route.ts 위 예시를 보면 page.js나 layout.js처럼 파일 기반 route를 제공한다. app 폴더 내부에 동일한 방식으로 route.ts 파일을 작성하면된다. 동일하게 app폴더 내에서 파일 기반으로 동작하기 때문에 중첩을 피하기 위해서..
여러분, 안녕하세요! Next.js 프레임워크로 멋진 웹사이트를 만들려는 분들을 위해, 제가 오늘 여러분들에게 Next.js에서 사용하는 4가지 데이터 가져오기 기법을 소개해드릴 거예요! 이 글을 통해 각각 어떻게 다른지 이해하고, 어떤 상황에 어떤 기능을 사용해야 하는지 파악해봅시다! 데이터 가져오기 네 가지 기법의 살짝 둘러보기 getInitialProps 🕵️♂️ - 요청 시점에 서버와 클라이언트 모두에서 실행됩니다. - 페이지의 초기 상태를 설정해줍니다. getServerSideProps 🏃♂️ - 요청 시점에 서버에서 실행되어 데이터를 가져옵니다. - 서버 사이드 렌더링(SSR)의 빛을 발합니다. getStaticPaths 🛣 - 빌드 시점에 정적 경로를 생성합니다. - 필요한 경로만 정적으..
