Middleware.ts and .env.local is not working in Next.js with Clerk Integration

Question

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.

Note that all files in /public get served when you host the app somewhere, so you should never put any files containing secrets there. If your Web app was publicly available in any capacity (including via account access) when you put .env.local in /public, you may want to seriously consider changing any secrets contained in your .env.local file as they may have been compromised. — bob
– bob, Commented Aug 25, 2024 at 16:36

Devanand · Accepted Answer · 2024-08-19 12:10:07Z

0

Have you try adding the env in next.config.mjs like below

.env.local
 
BACKEND_URL=http://localhost:5005

next.config.mjs
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    BACKEND_URL: process.env.BACKEND_URL, //add like this
  },
  optimizeFonts: true,
  reactStrictMode: true,
};

export default nextConfig;

for me it works sometimes.

edited Aug 19, 2024 at 12:10

answered Aug 19, 2024 at 12:09

Devanand

14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

praveen pc Over a year ago

No its not deducting the env file. I tried using process.env method still my problem didnt got resolved.

praveen pc · Accepted Answer · 2024-08-25 16:23:28Z

0

After Day of Analyzing, I found the reason why .env.local and middleware.ts file did not got involked. Its because i declared this both file inside my app folder. It should be outside the app folder. It should be in the same level of next.config.mjs file. This Dir is the root directory. I changed those files to root directory, and it worked. Refer my director above to understand clearly.

Thanks

answered Aug 25, 2024 at 16:23

praveen pc

12 bronze badges

Collectives™ on Stack Overflow

Middleware.ts and .env.local is not working in Next.js with Clerk Integration

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related