🙆‍♀️

【Drizzle ORM】NextJs14 と Drizzle ORM【#2 Set Up2】

2024/07/01に公開

Next.js

【#2 Set Up2】

YouTube: https://youtu.be/Pk8B75t5Xsg
https://youtu.be/Pk8B75t5Xsg

今回は「Neon」と「Clerk」の初期設定を行います。

まずはappディレクトリと同じ階層に「.env.local」のフォルダを作成します。
そして、以下の内容をそれぞれ記述します。

こちらのコードはサンプルですので、
ご自身でアカウントを作成して、必要な内容を設定してください。

https://neon.tech/

https://clerk.com/

.env.local

DATABASE_URL=postgresql://myapp_owner:HyS.............

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZGV.........
CLERK_SECRET_KEY=sk_test_4l...............

こちらのファイルが作成できましたら、
Clerkのライブラリをインストールします。

npm install @clerk/nextjs@5.1.6

次にClerkのガイドに従い、ミドルウェアファイルを作成します。

middleware.ts

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

最後にlayout.tsxにプロバイダーを設定します。

app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import {
  ClerkProvider,
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton,
} from "@clerk/nextjs";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body className={inter.className}>
          <SignedOut>
            <SignInButton />
          </SignedOut>
          <SignedIn>
            <UserButton />
          </SignedIn>
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

【#2 Set Up2】

Discussion