🌟

【Drizzle ORM】NextJs14 と Drizzle ORM【#２０ Navbar1】

2024/09/01に公開

Next.js

【#２０ Navbar1】

YouTube: https://youtu.be/TD5B25BX1BU
https://youtu.be/TD5B25BX1BU

今回から各データを表示するページを作成していくのですが、
まずはナビゲーションバーの実装から行います。

npx shadcn-ui@latest add button

components/navbar/index.tsx

import Link from "next/link";
import { Loader2 } from "lucide-react";
import {
  SignInButton,
  SignedIn,
  SignedOut,
  UserButton,
  ClerkLoading,
  ClerkLoaded,
} from "@clerk/nextjs";

import { Button } from "@/components/ui/button";

const navItem = [
  { href: "/", label: "Home" },
  { href: "/profile", label: "Profile" },
];

export const Navbar = () => {
  return (
    <div className="w-full py-3 px-6">
      <div className="w-full max-w-screen-2xl mx-auto flex items-center justify-between">
        <Link href="/">
          <h1 className="text-2xl font-bold">My App</h1>
          <p className="text-sm font-semibold text-muted-foreground">
            Nextjs Hono Drizzle
          </p>
        </Link>
        <nav className="flex items-center gap-x-3">
          <div>{/* navigaiton */}</div>
          <ClerkLoading>
            <div className="flex items-center justify-center">
              <Loader2 className="size-7 animate-spin" />
            </div>
          </ClerkLoading>
          <ClerkLoaded>
            <SignedOut>
              <Button asChild>
                <SignInButton />
              </Button>
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </ClerkLoaded>
        </nav>
      </div>
    </div>
  );
};

app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { ClerkProvider } from "@clerk/nextjs";

import QueryProvider from "@/providers/query-provider";
import { Navbar } from "@/components/navbar";

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}>
          <QueryProvider>
            <Navbar />
            {children}
          </QueryProvider>
        </body>
      </html>
    </ClerkProvider>
  );
}

【#２０ Navbar1】

Discussion