🔑

Next.jsのアプリに10分で認証機能を追加する

2023/10/09に公開

Next.js

clerk

tech

こんにちは。けいすけです。

なにをするか

Clerkというツールを使って、Next.jsのアプリに10分で認証機能を追加します。
ここでやる内容は無料なので安心してください。

手順

Next.jsのアプリを作る

npx create-next-app@latest nextjs-with-clerk

コマンド実行後の回答は、今回は次の表のようにしました。

Q	A
Would you like to use TypeScript?	Yes
Would you like to use ESLint?	Yes
Would you like to use Tailwind CSS?	Yes
Would you like to use `src/` directory?	No
Would you like to use App Router? (recommended)	Yes
Would you like to customize the default import alias (@/*)?	No

`@clerk/nextjs`をインストールする

cd nextjs-with-clerk
npm install @clerk/nextjs

Clerkにサインアップする

Clerkにアクセスします。

サインアップします。

"Application name"を入力し、"CREATE APPLICATION"をクリックします。

Next.jsを選び、APIキーをコピーします。

環境変数を設定する

.env.localというファイルをルートフォルダーの中に作り、コピーした内容を貼り付けます。

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=sk_test_••••••••••••••••••••••••••••••••••

`<ClerkProvider />`でアプリをラップする

app/layout.tsx

import { ClerkProvider } from '@clerk/nextjs'
 
export const metadata = {
  title: 'Next.js 13 with Clerk',
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </ClerkProvider>
  )
}

保護するページを設定する

middleware.ts

import { authMiddleware } from "@clerk/nextjs";
 
// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your middleware
export default authMiddleware({});
 
export const config = {
      matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

サインアップページを作る

app/sign-up/[[...sign-up]]/page.tsx

import { SignUp } from "@clerk/nextjs";
 
export default function Page() {
  return <SignUp />;
}

サインインページを作る

app/sign-in/[[...sign-in]]/page.tsx

import { SignIn } from "@clerk/nextjs";
 
export default function Page() {
  return <SignIn />;
}

環境変数を追加する

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=sk_test_••••••••••••••••••••••••••••••••••

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

`<UserButton />`を置く

app/page.tsx

import { UserButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <div>
      <UserButton afterSignOutUrl="/"/>
    </div>
  )
}

これで完成です🎉

動作確認

npm run dev

ブラウザでhttp://localhost:3000にアクセスすると下のような画面になるので"Sign up"をクリックします。

メールアドレスとパスワードを入力して"CONTINUE"をクリックします。

入力したメールアドレス宛てに送られてきたVerification codeを入力します。

サインインすると次のような画面になります。左上に<UserButton />というコンポーネントだけあります。

<UserButton />をクリックすると、アカウント管理とサインアウトができます。

Clerkのダッシュボードを開くと、ユーザー数やサインアップ、サインインのログなどが見れます。

動作確認は以上です。

最後に

僕のような初心者でも躓かずに10分で作れるのを体験して欲しかったので詳細な説明は省きました。
認証で保護するページや、UIの見た目などはカスタマイズできます。詳細はドキュメントをご覧ください。

料金ですが、月間アクティブユーザー数5,000人までは無料でクレジットカードの登録も必要ないとあるので安心ですね。認証が必要なアプリケーションのプロトタイピングにはいいんじゃないんでしょうか。

読んでいただきありがとうございました🙇