🔥

【NextJs14】NextJs14 と便利なライブラリ【#４Clerk PublicRoutes】

2023/12/12に公開

Next.js

clerk

shadcn/ui

tech

【#４Clerk PublicRoutes】

YouTube: https://youtu.be/jA-eQp5EtQI

https://youtu.be/jA-eQp5EtQI

今回はログインしていなくても
トップページが表示できるように実装をしていきます。

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({
  publicRoutes: ["/"],
});

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

そして、「(home)」ディレクトリを作成して
appディレクトリ直下の「page.tsx」を移動します。

app/(home)/page.tsx

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

export default function Home() {
  return (
    <main className="w-full h-full flex flex-col items-center justify-center">
      <h1 className="text-center text-3xl font-bold mb-2">WelCome Home</h1>
      <div className="flex items-center justify-center gap-x-2 mb-2">
        <Link href="/sign-in">
          <Button variant="primary">Sign In</Button>
        </Link>
        <Link href="/sign-up">
          <Button variant="outline">Sign Up</Button>
        </Link>
      </div>
      <div className="flex items-center justify-center">
        <Link href="/sign-up">
          <Button variant="link">Protected Page</Button>
        </Link>
      </div>
    </main>
  );
}

今回はさらに「Shadcn-ui」の「Button」コンポーネントを
カスタマイズしてみます。

インストールコマンド
npx shadcn-ui@latest add button

「variant」の一番下に「primary」を追加しました。

components/ui/button.tsx

variant: {
primary: "bg-indigo-600 hover:bg-indigo-500 text-white",
},

【#４Clerk PublicRoutes】

Discussion