Next.js Discord

Discord Forum

Middleware not work while changing page with `next/link`

Unanswered
Carpenter wasp posted this in #help-forum
Open in Discord
Carpenter waspOP
I want to check every time the user changes pages with middleware, but it only works when you reload the page or go to a page directly. It doesn't work when using next/link. What should I do?

31 Replies

Arinji
Can you elaborate, did the user click on the link and navigate to a new page? If yes please record the bug so we can verify
Carpenter waspOP
wait i will screencast
Carpenter waspOP
here what i mean
middleware only work once
      <Link className="btn btn-primary" href={"/dashboard/test2"}>
        Next
      </Link>

      <Link className="btn btn-primary" href={"/dashboard"}>
        Pre
      </Link>

this how i change the page
Carpenter waspOP
up
Carpenter waspOP
up
Carpenter waspOP
up
@Carpenter wasp middleware only work once
Anay-208
This is because of cache
export const dynamic = 'force-dynamic'

add this line before exporting the func
Anay-208
Hey @Carpenter wasp, is your issue resolved
@Anay-208 Hey <@850817443454255104>, is your issue resolved
Carpenter waspOP
are you sure? this is middleware file, did we can use it on middleware?
Carpenter waspOP
not work
still same
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import AuthMiddleware from './app/auth/_utils/middleware';
import MainPageMiddleware from '@/app/(main)/_utils/middleware';

export const dynamic = 'force-dynamic'

// Main
export default async function mainMiddleware(request: NextRequest) {
  console.log("running!")
  const url = request.nextUrl;

  if (url.pathname.startsWith('/auth')) {
    // return AuthMiddleware(request)
  }

  if (
    url.pathname.startsWith('/dashboard') ||
    url.pathname.startsWith('/portfolio') ||
    url.pathname.startsWith('/account')
  ) {
    return MainPageMiddleware(request)
  }

  return NextResponse.next();
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}
@Carpenter wasp not work
Anay-208
Can you add it to the page.tsx or route.ts?
@Anay-208 Can you add it to the page.tsx or route.ts?
Carpenter waspOP
Anay-208
What’s your nextjs version? As soon as I get free I’ll check this in my own system
  "dependencies": {
    "@headlessui/react": "^2.0.3",
    "next": "14.2.3",
    "next-client-cookies": "^1.1.1",
    "nextjs-toploader": "^1.6.12",
    "react": "^18",
    "react-dom": "^18",
    "react-icons": "^5.2.1",
    "react-image-crop": "^11.0.5",
    "react-toastify": "^10.0.5"
  },
Anay-208
@Carpenter wasp I checked it and I guess its because its been cached in the client. I'm not sure what is going on, But I was able to bypass the cache by providing a random query to the uri
Carpenter waspOP
so i just need to use query?
interesting but thats not really solving some problem
so it need to be fixed
nextJs too crazy with cache
should i use older version or change framework?, the project I am developing is stuck in the middle of the road with the deadline almost at its limit
Anay-208
I guess you should wait more skilled people to response. Using query bypasses the cache.
@Carpenter wasp so i just need to use query?
Sokoke
export default async function middleware(request: NextRequest) {
  const headers = new Headers()
  headers.set("x-middleware-cache", "no-cache")
  return NextResponse.next({
    headers,
  })
}


This seems to trigger middleware on every client route navigation.

It doesn't satisfies my project requirements, but may satisfies yours.