Recommended
Consider this Next.js 14 server component that checks for a user session and renders accordingly.
import { cookies } from 'next/headers';
export default async function Page() {
const cookieStore = cookies();
const session = cookieStore.get('session-token');
if (!session) {
return <h1>Please log in</h1>;
}
return <h1>Welcome back!</h1>;
}What will this component render if the 'session-token' cookie is missing?
import { cookies } from 'next/headers'; export default async function Page() { const cookieStore = cookies(); const session = cookieStore.get('session-token'); if (!session) { return <h1>Please log in</h1>; } return <h1>Welcome back!</h1>; }
Think about what happens when the cookie named 'session-token' is not found.
If the cookie 'session-token' is missing, cookieStore.get('session-token') returns undefined. The condition !session becomes true, so the component returns <h1>Please log in</h1>.
Given this Next.js client component using useState and useEffect to fetch session data:
import { useState, useEffect } from 'react';
export default function SessionStatus() {
const [session, setSession] = useState(null);
useEffect(() => {
fetch('/api/session')
.then(res => res.json())
.then(data => setSession(data.session));
}, []);
return <div>{session ? 'Logged in' : 'Not logged in'}</div>;
}If the API returns {"session": "user123"}, what will be displayed after the fetch completes?
import { useState, useEffect } from 'react'; export default function SessionStatus() { const [session, setSession] = useState(null); useEffect(() => { fetch('/api/session') .then(res => res.json()) .then(data => setSession(data.session)); }, []); return <div>{session ? 'Logged in' : 'Not logged in'}</div>; }
Consider what happens when session state is updated with a non-null string.
Initially, session is null, so it shows 'Not logged in'. After fetch completes, session becomes 'user123', which is truthy, so it shows 'Logged in'.
In a Next.js API route, you want to set a cookie named 'session-token' with value 'abc123' that is HttpOnly and Secure. Which code snippet is correct?
export default function handler(req, res) { // set cookie here res.status(200).json({ success: true }); }
Remember that Next.js API routes use Node.js res object and setting headers directly is common.
Option A uses res.setHeader to set the cookie string with correct flags. Option A and C use methods not available on res. Option A uses wrong method headers.set.
Examine this Next.js middleware code:
import { NextResponse } from 'next/server';
export function middleware(request) {
const session = request.cookies.get('session-token');
if (!session) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}It always redirects to '/login' even when the cookie exists. Why?
import { NextResponse } from 'next/server'; export function middleware(request) { const session = request.cookies.get('session-token'); if (!session) { return NextResponse.redirect(new URL('/login', request.url)); } return NextResponse.next(); }
Think about how cookies are accessed in Next.js middleware.
In Next.js middleware, request.cookies is not always populated. You should parse cookies manually from request.headers.get('cookie'). So option D explains the issue correctly.
Why is it generally unsafe to store sensitive session data directly in client-side cookies?
Consider who can access cookies stored on the client side.
Cookies stored on the client can be read and changed by users or attackers if not protected. This risks session hijacking or data tampering. Cookies are not encrypted by default (option B is false). Cookies can be set to persist beyond browser close (option B false). Cookies are sent with HTTPS requests if Secure flag is set (option B false).