Next-auth Next.js 애플리케이션에서 사용자를 인증하고 관리하기 위한 오픈 소스 라이브러리`next-auth`를 사용하면 다양한 인증 제공자(소셜 로그인, 이메일, 로그인 등) 손쉽게 통합할 수 있으며, Oauth 2.0, OpenID Connect, JWT(JSON Web Token)와 같은 다양한 인증 표준도 지원을 한다. 기능 - 다양한 인증 제공자 지원 - OAuth 2.0 : Google, Facebook, Twitter, GitHub 등 소셜 로그인 제공자를 지원한다.자체 로그인 : 이메일 기반의 인증 및 비밀번호 기반 로그인을 구현할 수 있다.타사 로그인 : 엔터프라이즈 인증 제공자(Auth0,Microsoft Azure AD)와도 통합할 수 있다. 세션관리 `next-auth`는..

CSS 모듈 사용import styles from './Home.module.css';function HomePage(){ return Hello World;}export default HomePage; - `Home.module.css` 파일을 만들어 `styles.title` 처럼 사용한다. 전역 CSS 사용//pages/app.jsimport '../styles/globals.css';function MyApp({ Component, pageProps }) { return ;}export default MyApp;- `pages/app.js` 파일에서 임포트 한다. 데이터 패칭 (geStaticProps, getServerSideProps) - Next.js는 데이터 패칭 메서드를 제공하여 서버 사..

파일 기반 라우팅모든 애플리케이션에서 골격은 라우팅이다. next.js에서 라우팅은 파일 시스템 기반이다. `pages` 디렉터리에 파일을 생성하면, 해당 파일의 이름이 자동으로 URL 경로로 매핑된다. 기본 라우팅`pages/index.js` -> `/``pages/about.js` ->`/about``pages/blog/first-post.js` -> `/blog/first-post`동적 라우팅next.js에서는 파일 이름을 대괄호로('[]')로 감싸면 동적 라우팅이 가능하다.URL 경로의 일부를 변수로 처리하여, 다양한 경로를 하나의 페이지 컴포넌트로 처리할 수 있게 해주는 기능즉, URL의 특정 부분이 고정된 값이 아니라, 요청에 따라 변할 수 있는 경우 사용`pages/blog/[id].js` ..