I’m Working in a project, while integration clerk with Next.JS. I found the middleware.ts and .env.local for secret keys are not working.
Click this to see directoryenter image description here
Middleware.ts Code:
import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
const isPublicRoute = createRouteMatcher(["/sign-in(.*)", "/sign-up(.*)"]);
export default clerkMiddleware((auth, request) => {
console.log("skhjcbdhjcbhjdcbhjcdbhjdcbhjdcbhjdbhjdbhjdcbghjdcvbw");
if (!isPublicRoute(request)) {
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)(.*)",
],
};
Root Layout File :
import { Inter } from "next/font/google";
import "./globals.css";
import { ClerkProvider } from "@clerk/nextjs";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<ClerkProvider>
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
</ClerkProvider>
);
}
I tried putting my .env.local file and middleware.ts file to /public folder but it didn’t help.
I tried to check whether middleware.ts is working or not by adding a console.log() command but its not getting invoked when a request comes actually.
And I tried using publishableKey="mykey" in ClerkProvided Initialization and its working. So I’m concluding the .env.local file and middleware.ts file is not accessible by Next.js.
How to rectify this issue? Please help me. Thanks in advance.