📑

【Drizzle ORM】NextJs14 と Drizzle ORM【#２４ Peofile Page】

2024/10/29に公開

Next.js

【#２４ Peofile Page】

YouTube: https://youtu.be/WSymxMRppZc
https://youtu.be/WSymxMRppZc

今回はプロフィールのページを作成します。

まずは、appディレクトリ直下に「(protected)」というグループを作成します。
そして「(protected)」内に「layout.tsx」ファイルを作成します。

app/(protected)/layout.tsx

type Props = React.PropsWithChildren;

const ProtectedPageLayout = ({ children }: Props) => {
  return (
    <div className="w-full py-3 px-6">
      <div className="max-w-screen-2xl mx-auto">{children}</div>
    </div>
  );
};

export default ProtectedPageLayout;

次に、「(protected)」内に「profile」フォルダを作成して、
その中に「page.tsx」を作成します。

さらにShadcnから「Card」「Avatar」のコンポーネントをインストールします。

//ターミナル上でコンポーネントを選択するコマンド
npx shadcn@latest add

//個別にインストールする方法
npx shadcn@latest add avatar

app/(protected)/profile/page.tsx

"use client";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

const ProfilePage = () => {
  return (
    <div className="flex flex-col gap-y-3">
      <Card>
        <CardHeader>
          <CardTitle className="font-bold">My Profile</CardTitle>
          <CardDescription>Profile Details</CardDescription>
          <Separator className="my-4" />
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-x-2">
            <Avatar>
              <AvatarImage src={""} alt="User" />
              <AvatarFallback>M</AvatarFallback>
            </Avatar>
            <div className="flex flex-col justify-center">
              <p className="text-sm truncate">user name</p>
              <p className="text-sm truncate text-muted-foreground">
                user email
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default ProfilePage;

【#２４ Peofile Page】

Discussion