I've installed clerk on my project and I want to have certain routes used as protected but auth.protect() doesn't seem to have any effect.
middleware.ts
import {clerkMiddleware, createRouteMatcher} from "@clerk/nextjs/server";
const isPrivateRoute = createRouteMatcher(["/add-job(.*)", "/jobs"]);
export default clerkMiddleware(async (auth, req) => {
if (isPrivateRoute(req)) await auth.protect();
});
export const config = {
matcher: [
// Skip Next.js internals and all static files, unless found in search params
"/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
// Always run for API routes
"/(api|trpc)(.*)",
],
};
layout.tsx
import type {Metadata} from "next";
import {Inter} from "next/font/google";
import {ClerkProvider} from "@clerk/nextjs";
import "./globals.css";
const inter = Inter({
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Jobify Dev",
description: "Job application tracking system for job hunters",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<ClerkProvider>
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
</ClerkProvider>
);
}
package.json
{
"name": "jobify",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build --turbopack",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"@clerk/nextjs": "^6.33.0",
"@prisma/client": "^6.16.2",
"@radix-ui/react-slot": "^1.2.3",
"@tanstack/react-query": "^5.89.0",
"@tanstack/react-query-devtools": "^5.89.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"dayjs": "^1.11.18",
"lucide-react": "^0.544.0",
"next": "15.5.3",
"next-themes": "^0.4.6",
"react": "19.1.0",
"react-dom": "19.1.0",
"recharts": "^3.2.1",
"tailwind-merge": "^3.3.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.5.3",
"prisma": "^6.16.2",
"tailwindcss": "^4",
"tw-animate-css": "^1.3.8",
"typescript": "^5"
}
}
Also my middleware.ts file is located in the root folder while path for layout.tsx is app/layout.tsx I think it should be something straightforward unless if I'm missing a silly bug. Thanks in advance.
