nextjs clerk 설정 페이지
일단 설정 url이 맞게 나오는지 간단한 페이지를 만들어요. /app/(platform)/(dashboard)/organization/[organizationId]/settings/page.tsx OrganizationProfile을 불러오고 사용자정의 css를 적용합니다.
[월:] 2023년 11월
nextjs 모바일 메뉴 팝업 sidebar
상태관리 모듈 중 하나인 zustand 설치합니다. shadcn-ui에 있는 sheet 콤포넌트 설치합니다. sheet로 나타나도록 할 것입니다. zustand를 사용하여 모바일 상태관리 추가합니다. /books/use-mobile-sidebar.ts 기존 navbar.tsx에서 모바일부분이라고 메모한 부분에 MobileSidebar추가합니다. /app/(platform/(dashboard)/_components/navbar.tsx mobile-sidebar 영역 생성합니다. /app/(platform/(dashboard)/_components/mobile-sidebar.tsx 새로고침하면 오류 나지 않도록 useEffect이용해서 로딩 끝나면 return 되도록 한다. 버턴을 누르면 사이드바가 나오도록 추가합니다. 기존 사이드바에 스켈레톤으로 로딩 표시합니다. /app/(platform)/(dashboard)/_components/sidebar.tsx nav-item 부분에도 … Read more
nextjs 사이드바 만들기
hooks 사용 할 수 있도록 설치합니다. shadcn에 있는 skeleton 사용하기 위해서 추가합니다. 레이아웃 파일을 생성 합니다. navbar가 상단에 있는 경우 콘텐츠가 보이지 않을 수 있어서 pt를 통해서 아래 보이도록 합니다. 메뉴를 표현하는 도구로 accordion과 separator를 추가합니다. /app/(platform)/(dashboard)/organization/layout.tsx 사이드바 콤포넌트를 생성합니다. /app/(platform)/(dashboard)/_components/sidebar.tsx 생성한 Sidebar를 불러오도록 layout.tsx 파일을 수정합니다. /app/(platform)/(dashboard)/organization/layout.tsx 사이드바를 마무리합니다. /app/(platform)/(dashboard)/_components/sidebar.tsx NavItem 선택하는 시점부터 네이게이션 … Read more
nextjs 외부 이미지 보이지 않는 경우
nextjs 에서 이미지 표시할때 Invalid src prop hostname is not configured under images in your next.config.js 오류 메시지 나오는 경우 설명 나온 것처럼 next.config.js 파일에 설정 추가해야 합니다. next.config.js 파일을 열어서 remotePatterns 부분을 추가해주세요.
clerk 조직 기능 활성화
clerk.com 이용해서 클라우드 서비스 이용하는 경우 조직 기능을 사용 할 수 있어요. clerk 대부분 기능을 NextAuth로 대신 할 수 있을텐데 조직은 clerk에만 있어요. 물론 다 스스로 개발하면 조직도 할 수 있겠지만 얼마나 편하고 빠르게 하 르수 있는지에 대한 것이겠죠 Organizations Settings 메뉴에서 활성화 할 수 있어요. 무료에서 3명까지 사용 할 수 있나봐요. Enable Organizations 눌러서 … Read more
nextjs clerk 로그인 연동
nextjs 로그인 연동 하는 과정을 편하게 관리 할 수 있도록 하는 클라우드 서비스가 clerk라고 있더라고요. 무료로 사용 할 수 있으니까 https://dashboard.clerk.com 이동해서 가입하세요. 가격을 보면 5000명까지는 무료로 회원 관리 할 수 있어서 비용 걱정 없이 사용 할 수 있어요. 간단하게 구현하고 나서 나중에 바꾸면 될 것 같아요. .env 파일을 사용 할 것이라서 .gitignore 파일에 .env … Read more
nextjs 14 metadata favicon title
nextjs 14에서 동적으로 title이나 favicon을 관리하기 위해서 가장 최상위에 config 폴더를 만들고 site.ts 파일을 만들어서 정보를 등록합니다. /config/site.ts 동적으로 설정하는 아이콘이 파비콘으로 나오게 하려면 /app 폴더 안에 favicon.ico파일이 없어야 합니다. favicon.ico 파일을 삭제해주세요. 설정한 site.ts 내용을 layout.tsx 에서 설정하세요. /app/layout.tsx 다크모드인 경우와 아닌 경우 다른 아이콘이 보이도록 설정 할 수 있습니다.
nextjs Layout Navbar 그리고 로고
상단 Navbar 만들기 위해서 components 아래 navbar.tsx 를 생성 합니다. _를 사용하여 페이지로 인식하지 않도록 합니다. /app/(marketing)/_components/navbar.tsx 이 Navbar 콤포넌트를 layout.tsx 에서 불러와 사용합니다. /app/(marketing)/layout.tsx 이제 화면을 보면서 Navbar를 만들어 갈 수 있어요. 이제 왼쪽 상단에 로고를 표현하기 위해 로고 콤포넌트를 생성 합니다. 로고는 다른 페이지에서도 사용 할 수 있어서 /components/logo.tsx 에 생성 합니다. 로고 … Read more
nextjs shadcn 콤포넌트 버튼 사용하기
nextjs 초기 프로젝트 설정에서 shadcn 초기화 했었는데요. 이제 버튼과 같은 컴포넌트 추가해서 사용할 수 있습니다. components 폴더에 button이 생겨 있을 것입니다. 이제 사용하기만 하면 됩니다. Button Components 를 사용하여 링크로 연결하는 예제입니다.
nextjs 14 온라인 폰트 로컬 폰트
온라인에서 폰트 사용하는 경우 woff2 확장자를 사용 할 수 있습니다. woff2 확장자 폰트를 구했다면 public/fonts 폴더로 이동 시켜서 사용 할 수 있습니다. nextjs 있는 next/font/local에서 import 할 수 있어요. shadcn을 이용해서 cn 함수 이용해서 폰트 사용 할 수 있어요. 구글 폰트를 이용할 수도 있어요. 먼저 선언하는 부분입니다. 역시 cn 함수를 이용해서 폰트를 사용 할 수 … Read more