[NextJS] 시작하기

목표

0. NextJS(ReactJS)친해지기
1. 클론 코딩으로 공부하기

   https://www.youtube.com/watch?v=ADJKbuayubE

NEXT.JS

• 폴더 구조
  ㄴ app -> 애플리케이션에 대한 모든 경로, 구성 요소 및 논리가 포함 주로 여기서 작업
  ㄴ pages -> 페이지 라우터
  ㄴ public -> 이미지와 같은 애플리케이션의 모든 정적 자산을 포함
  ㄴ src -> 옵션으로 선택 가능 한 폴더

현재 구성

Next.js : 14.1.0
Node : v18.17.0
convex.dev
Clerk.com(로그인 관련) :

순서

1. Clerk.com 가입하기
2. New application 생성하기
   

2-1. Application name 입력 후 가입에 지원 할 방법 선택 후 [Create appliction] 클릭
3. API Keys 복사 후 VSCode [.env.local] 에 붙여 넣기\
4. [Continue in docs] 클릭 후 터미널 창에

npm install @clerk/nextjs 입력

Next.js 의 기능 middleware.ts 파일 생성
/src폴더를 사용 할 경우
/src/middleware.ts(js)

/src폴더를 사용 하지 않을 경우
/middleware.ts(js)

middleweare.ts를 사용 하는 이유 :
미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행할 수 있습니다. 그런 다음 들어오는 요청에 따라 요청 또는 응답 헤더를 다시 작성, 리디렉션, 수정하거나 직접 응답하여 응답을 수정할 수 있습니다.

middleware.ts에 추가

import { authMiddleware } from "@clerk/nextjs";

Convex.com 에서 clerk 사용 방법

https://docs.convex.dev/auth/clerk

1. Clerk 가입
2. Clerk 애플리케이션 만들기
3. JWT 템플릿 만들기
   Clerk -> Dashboard -> JWT Templates -> [Convex] -> [Apply Changes]

4. 인증 구성 만들기
   auth.config.js 추가
   /convex/auth.config.js

export default {
  providers: [
    {
    // JWT Templates에 생성된 Template 클릭 후 Issuer URL 넣기
      domain: "https://your-issuer-url.clerk.accounts.dev/",
      applicationID: "convex",
    },
  ]
};

5. Clerk.com -> Organizations Settings -> 활성화 버튼 클릭
   -> JWT Templates -> [convex] 템플릿 클릭 -> org_role/org_id 추가 -> [Save changes]저장하기
   

6. UI 컴포넌트 추가

   npx shadcn-ui@latest add dialog
   npx shadcn-ui@latest add tooltip