nextjs (3) 썸네일형 리스트형 [Next.js] Nextjs에 Clerk IDaaS 적용기 원래 회사에서 사용자 인증 ,권한 관리 서비스로 사용하던 IDaaS(Identity-as-a-Service)는 auth0였는데, 비용 문제 등등 해서 Clerk로 변경을 할 수 있다고 해서, 일단 전체 변경했던 부분을 정리해본다! 이 회사에서 쓰는건 죄다 한글문서는 거의 존재하지 않았는데 Clerk도 마찬가지였다 :O 개인적으로 문서도 auth0에 비해 훨씬 깔끔하고 UI컴포넌트도 다양하고 설명도 잘 되어 있어서 적용하는데 문서만으로 충분했다 🔗 QuickStart 🔗 공식문서 > 🔗 UI컴포넌트 관련 페이지 > 참고로 저는 app router 기반으로 설정한부분을 정리해둡니다. ( Clerk Dashboard 설정, 가입과 nextjs는 되어 있는걸로 생각하고 넘어갑니다 ) 1. Install Cler.. [Next.js] next/Link 사용하기 (공식문서 내용 정리) next/Link 사용하기 1.pages의 하위 디렉토리가 아래와 같을때 pages/index.js pages/about.js pages/blog/[slug].js 2. import 후 import Link from 'next/link' 3. 아래의 형태로 사용 Home About Us Blog Post Link의 props정리 필수값 1. href 이동할 경로 혹은 URL ... 옵션값 1. as 이동할 경로 혹은 URL ... 2. passHref 기본값 : false next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역할 A태그 // 자식태그가 styled component a태그인 경우 참고 : https://f-dever-error-log.tistory.com/56 위처럼 pass.. [Next.js] next/router 사용하기 (공식문서 내용 정리) next/router 사용하기 router 객체에 접근하기 위해서 useRouter를 사용한다 1. import 후 import { useRouter } from 'next/router' 2. 아래의 형태로 사용 const router = useRouter() 아래처럼 console에서 router 객체에 대한 정보를 얻을 수 있다. router object 1. asPath - basePath이나 locale이 포함되지 않은 path ex ) 'https://dlquff-byeol4001.vercel.app/501da229-9915-4264-9d37-6783545ee553' 의 경우 asPath = '/501da229-9915-4264-9d37-6783545ee553' 2. basePath - 활성화 .. 이전 1 다음
