[Next.js] Nextjs에 Clerk 적용 2

이 전 문서는 클록을 설치하고 세팅하는 방법에 대해서 다뤄봤습니다.

 

이번엔 페이지에 관련해서 작성해보겠습니다.

 

5. 회원가입(sign-up) 페이지 만들기

// /app/(auth)/(routes)/sign-up/[[...sign-up]]/page.tsx

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

export default function Page() {
/* 
아래에 SignUp 컴포넌트는 아까 Clerk 사이트에서 Clerk Application 만들 때
선택했던 UI 기반으로 컴포넌트를 만든 것입니다.
*/
  return <SignUp />; 
}

 

6. 로그인(sign-in) 페이지 만들기

// /app/(auth)/(routes)/sign-in/[[...sign-in]]/page.tsx

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

export default function Page() {
/* 
아래에 SignIn 컴포넌트 또한 아까 Clerk 사이트에서 Clerk Application 만들 때
선택했던 UI 기반으로 컴포넌트를 만든 것입니다.
*/
  return <SignIn />;
}

 

7. 로그인/회원가입 레이아웃 만들기

// /app/(auth)/layout.tsx

type Props = {
  children: React.ReactNode;
};

const AuthLayout = ({ children }: Props) => {
  return (
    <>
      <div className="flex h-full items-center justify-center">{children}</div>
    </>
  );
};

export default AuthLayout;

 

 

완성된 화면은

로그인 페이지

회원가입 페이지

 

이제 Continue with Google 버튼을 이용해 회원가입을 하고 로그인을 하면 됩니다.

 

제가 지금 Clerk에서 사용한 부분은 아주 기본적인 부분이며 추후에 더 다양한 속성에 대해서도 정리해보겠습니다.

 

https://clerk.com/

Clerk | Authentication and User Management