Once the cookie is set, I am unable to retrieve it in the middleware without having to refresh the page first. Why does this occur?
The cookie is being set as shown below:
import { getCookies, setCookie, deleteCookie, hasCookie } from 'cookies-next';
import { useRouter } from 'next/router';
export default function LoginPage() {
const router = useRouter()
const login = () => {
if (hasCookie('user')) {
router.push('/');
return;
}
setCookie('user', 'DHamidi-RandomValue')
router.push('/');
}
return <div className="layout">
<h2>Login</h2>
<button onClick={login}>
Add User Info To Cookie.
</button>
</div>
}
I need to access the cookie in the middleware:
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
if (request.cookies.has('user')) return NextResponse.next()
return NextResponse.redirect(new URL('/login', request.nextUrl.clone()))
}
export const config = {
matcher: '/admin/:path*',
}
NOTE:
It works perfectly in development mode (npm run dev), but the issue arises in production mode (
npm run build => npm run start