Recommended
Consider this Next.js functional component that shows different content based on user roles.
import { useState } from 'react';
export default function Dashboard() {
const [userRole] = useState('editor');
if (userRole === 'admin') {
return <h1>Admin Panel</h1>;
} else if (userRole === 'editor') {
return <h1>Editor Workspace</h1>;
} else {
return <h1>Viewer Page</h1>;
}
}import { useState } from 'react'; export default function Dashboard() { const [userRole] = useState('editor'); if (userRole === 'admin') { return <h1>Admin Panel</h1>; } else if (userRole === 'editor') { return <h1>Editor Workspace</h1>; } else { return <h1>Viewer Page</h1>; } }
Check the value of userRole and which condition matches.
The userRole is set to 'editor', so the component returns the <h1>Editor Workspace</h1> element.
accessLevel after this code runs?Given this React state update in a Next.js component, what will accessLevel be?
import { useState } from 'react';
export default function AccessControl() {
const [role] = useState('guest');
const [accessLevel, setAccessLevel] = useState('none');
if (role === 'admin') {
setAccessLevel('full');
} else if (role === 'editor') {
setAccessLevel('partial');
} else {
setAccessLevel('read-only');
}
return <div>Access: {accessLevel}</div>;
}import { useState } from 'react'; export default function AccessControl() { const [role] = useState('guest'); const [accessLevel, setAccessLevel] = useState('none'); if (role === 'admin') { setAccessLevel('full'); } else if (role === 'editor') { setAccessLevel('partial'); } else { setAccessLevel('read-only'); } return <div>Access: {accessLevel}</div>; }
Think about what happens when you call setAccessLevel inside the component body.
Calling setAccessLevel directly in the component body causes a state update on every render, leading to an infinite loop.
Choose the correct Next.js middleware code snippet that restricts access to '/admin' pages only to users with role 'admin'.
Check the correct usage of Next.js NextResponse.redirect method.
Option D correctly uses NextResponse.redirect to redirect unauthorized users. Option D uses a non-existent Response.redirect. Option D uses an undefined redirect function. Option D passes an invalid second argument to NextResponse.redirect.
Examine this Next.js page component that tries to restrict access to admins only. Why does it fail?
export default function AdminPage({ user }) {
if (user.role !== 'admin') {
return <p>Access Denied</p>;
}
return <h1>Welcome Admin</h1>;
}
export async function getServerSideProps(context) {
const user = await getUserFromSession(context.req);
return { props: { user } };
}export default function AdminPage({ user }) { if (user.role !== 'admin') { return <p>Access Denied</p>; } return <h1>Welcome Admin</h1>; } export async function getServerSideProps(context) { const user = await getUserFromSession(context.req); return { props: { user } }; }
Consider what happens if user is null or undefined.
If getUserFromSession returns null for unauthenticated users, then user is null. Accessing user.role causes a runtime error. The component should check if user exists before accessing properties.
Choose the most secure and scalable approach to enforce role-based access control in a Next.js application.
Think about where security checks must happen to prevent unauthorized access.
Client-side checks (B and C) can be bypassed by users. Static generation (D) cannot adapt per user at runtime. Server-side checks in API routes and SSR (A) ensure unauthorized users cannot access protected data or pages.