Unit 6: Advanced Features and Industry Practices - Practice Quiz

INT257 — Modern Web Application Development 60 Questions
0 Correct 0 Wrong 60 Left
0/60

1 What is the main purpose of Parallel Routes in Next.js?

Parallel Routes Easy
A. Translate content into multiple languages
B. Run tests in separate processes
C. Render multiple views in one layout
D. Redirect users to another domain

2 Which folder naming convention defines a Parallel Route slot in Next.js?

Parallel Routes Easy
A. (folder)
B. @folder
C. _folder
D. [folder]

3 Where are named Parallel Route slots commonly received for rendering?

Parallel Routes Easy
A. As layout component props
B. As environment variables
C. As browser cookies
D. As database table fields

4 What is a common use of Proxy in a web application?

Proxy Easy
A. Style reusable interface components
B. Inspect requests before routing
C. Define database table relationships
D. Generate unit test reports

5 Which task is well suited to a request Proxy?

Proxy Easy
A. Designing a page icon
B. Writing component documentation
C. Creating a database index
D. Redirecting unauthenticated users

6 What do Intercepting Routes allow an application to do?

Intercepting Routes Easy
A. Show a route within the current context
B. Translate a route automatically
C. Combine all routes into one file
D. Execute every route at build time

7 Which interface pattern commonly uses Intercepting Routes?

Intercepting Routes Easy
A. Photo displayed in a modal
B. Button styled with CSS
C. Password stored in a database
D. Package installed with npm

8 Where does Edge Runtime code typically execute?

Edge Runtime Easy
A. Inside the user's database
B. Only during local development
C. Near the application's users
D. Inside a CSS stylesheet

9 What is a common benefit of using the Edge Runtime?

Edge Runtime Easy
A. Lower request latency
B. Larger image dimensions
C. Longer variable names
D. More CSS selectors

10 Which statement about the Edge Runtime is generally correct?

Edge Runtime Easy
A. It supports a limited set of APIs
B. It requires every page to be static
C. It stores all application data locally
D. It replaces all client-side JavaScript

11 What does internationalization prepare an application to support?

Internationalization Easy
A. Multiple languages and regions
B. Multiple testing frameworks
C. Multiple database engines
D. Multiple source repositories

12 What is a locale in an internationalized application?

Internationalization Easy
A. A database connection setting
B. A reusable visual component
C. A language and regional preference
D. A server performance measurement

13 Which content commonly changes according to a user's locale?

Internationalization Easy
A. Date and currency formatting
B. HTTP protocol versions
C. Component file extensions
D. Source control commit hashes

14 What is the main goal of a clear project architecture?

Project Architecture Easy
A. Make the codebase easier to maintain
B. Remove the need for documentation
C. Place all logic in one component
D. Make every file use the same name

15 Where should shared utility functions generally be placed?

Project Architecture Easy
A. In the public assets folder
B. In a dedicated utilities module
C. Inside every page component
D. Inside the package lock file

16 What is a reusable component?

Component Organization Easy
A. A component executed only once
B. A component without any markup
C. A component stored in a database
D. A component used in multiple places

17 Which practice improves component organization?

Component Organization Easy
A. Giving every component one filename
B. Duplicating components for each page
C. Putting all components in one file
D. Grouping related components together

18 How should application secrets such as API keys usually be stored?

Security Best Practices Easy
A. In client-side component props
B. In public static files
C. In browser-visible comments
D. In protected environment variables

19 Why should an application validate user input?

Security Best Practices Easy
A. To reject invalid or harmful data
B. To rename components automatically
C. To increase the screen resolution
D. To reduce the number of routes

20 What does a unit test usually verify?

Testing Overview Easy
A. One small piece of functionality
B. The behavior of external organizations
C. The complete production infrastructure
D. The visual design of every page

21 In a dashboard application, which feature allows the layout to render a sidebar and a main content area independently using named slots?

Parallel Routes Medium
A. Parallel Routes
B. Static generation
C. Intercepting Routes
D. Middleware

22 A user navigates between pages inside a dashboard, but the analytics panel should preserve its state while the main content changes. Which approach is most appropriate?

Parallel Routes Medium
A. Place both views in one client component
B. Use an API route for the analytics panel
C. Convert the entire dashboard to static HTML
D. Use a parallel route for the analytics panel

23 What is the most suitable use of a Next.js proxy for a protected application area?

Proxy Medium
A. Generating CSS files during compilation
B. Managing state inside a browser component
C. Rendering database records into a table
D. Checking authentication before forwarding a request

24 A proxy should run only for requests beginning with /admin. Which configuration principle should be applied?

Proxy Medium
A. Use a loading boundary
B. Create a client-side context
C. Add a dynamic import
D. Configure a route matcher

25 A product list should open a product detail page in a modal when navigated from the list, but show a full page after a direct URL visit. Which feature supports this behavior?

Intercepting Routes Medium
A. Parallel data fetching
B. Static route generation
C. Intercepting Routes
D. Environment variables

26 Why should a modal opened through an intercepted route usually include a normal page implementation as well?

Intercepting Routes Medium
A. To disable browser history updates
B. To support direct navigation and refreshes
C. To make every request run at the edge
D. To avoid using server components

27 Which implementation is most compatible with an edge runtime?

Edge Runtime Medium
A. A handler requiring the Node.js fs module
B. A request handler using standard Web APIs
C. A process that launches a child process
D. A library dependent on native Node.js binaries

28 An edge function must access a database driver that depends on Node.js TCP sockets. What is the main concern?

Edge Runtime Medium
A. The browser will block all requests
B. The driver may not be supported
C. The function cannot return JSON
D. The route must become a static asset

29 An application supports English and French URLs such as /en/products and /fr/products. What should determine the displayed language?

Internationalization Medium
A. The number of URL segments
B. The server's operating system
C. The user's screen resolution
D. The locale associated with the route

30 A price must display correctly for users in Germany and the United States. Which strategy is most reliable?

Internationalization Medium
A. Store formatted prices as permanent strings
B. Replace every decimal point manually
C. Use locale-aware number and currency formatting
D. Use the browser's default font settings

31 Which architectural choice best supports independent development of a large web application?

Project Architecture Medium
A. Mix database logic into visual components
B. Organize code by clear domain boundaries
C. Duplicate authentication logic in every page
D. Place every component in one directory

32 A team wants to prevent UI code from directly constructing database queries. Which architectural practice is most appropriate?

Project Architecture Medium
A. Duplicate queries inside each page
B. Use a service or repository layer
C. Move all queries into CSS files
D. Expose database credentials to the browser

33 A button is reused across unrelated features and has no feature-specific behavior. Where should it generally be organized?

Component Organization Medium
A. Inside the database migration folder
B. In the proxy configuration file
C. Inside the route for one feature
D. In a shared UI component directory

34 A page needs browser event handlers, but most of its content is static. How should the components be organized?

Component Organization Medium
A. Move all content into a proxy
B. Keep the page server-rendered and isolate the interactive part
C. Render the page only after a database mutation
D. Make every component a client component

35 Which practice best protects a web application from SQL injection?

Security Best Practices Medium
A. Use parameterized queries
B. Minify the SQL statements
C. Hide the database hostname
D. Rename the database tables

36 A server action receives an isAdmin value from a form. Why should the server avoid trusting that value?

Security Best Practices Medium
A. Clients can modify submitted form values
B. Browsers automatically encrypt all form fields
C. Server actions cannot access request data
D. Forms cannot submit Boolean values

37 Which cookie configuration is most appropriate for a session identifier that should not be accessible to JavaScript?

Security Best Practices Medium
A. Place it in a client-side environment variable
B. Set the HttpOnly attribute
C. Set the Public attribute
D. Store it in a visible page heading

38 Which test type is most appropriate for verifying that a form displays an error when a required field is empty?

Testing Overview Medium
A. A database backup test
B. A component or integration test
C. A load test of the production server
D. A compiler performance test

39 A test passes locally but fails intermittently in continuous integration because it depends on timing. What is the best improvement?

Testing Overview Medium
A. Disable the test in continuous integration
B. Wait for observable conditions instead of fixed delays
C. Increase every timeout to ten minutes
D. Add random delays to the application

40 Which test provides the strongest check that a user can log in, reach a protected page, and log out through the browser?

Testing Overview Medium
A. A static type-checking run
B. A snapshot test for a button
C. A unit test for a formatter
D. An end-to-end test

41 A dashboard uses parallel routes for @analytics and @activity. The user navigates from /dashboard/reports to /dashboard/settings, but the activity panel should preserve its existing state while the analytics panel refreshes. Which design best achieves this behavior?

Parallel Routes Hard
A. Render both panels conditionally inside the page component
B. Store panel state in cookies and reconstruct it after navigation
C. Use separate slots with independent loading and error boundaries
D. Place both panels in one shared layout and reload them together

42 A modal is implemented with a parallel route slot. On a hard refresh at /inbox, the modal slot receives no active child, although client-side navigation correctly opens the modal. Which file most directly defines the refresh fallback for that slot?

Parallel Routes Hard
A. default.tsx inside the modal slot
B. not-found.tsx inside the modal slot
C. loading.tsx inside the modal slot
D. layout.tsx inside the modal slot

43 Two parallel route slots display independent resources. One resource returns a 403 response while the other succeeds. What is the most appropriate boundary arrangement?

Parallel Routes Hard
A. One global error boundary around the entire dashboard
B. An error boundary colocated within each parallel slot
C. A middleware redirect for every failed slot request
D. A single try/catch around the parent layout fetch

44 A proxy should protect /admin routes but must not run for /_next/static, image optimization requests, or files containing a dot in their final path segment. Which matcher strategy is most precise?

Proxy Hard
A. Run the proxy only from the root layout after rendering begins
B. Match only /admin/:path* and ignore static asset handling
C. Use a negative-lookahead matcher excluding framework assets and dotted paths
D. Match every request beginning with / and check exclusions in the handler

45 A proxy validates an access token and then redirects unauthenticated users to /login?returnTo=<original path>. Which issue must be addressed before deploying this implementation?

Proxy Hard
A. The login page must be rendered exclusively on the Edge Runtime
B. The token must always be stored in a client-side local-storage key
C. The return path must be validated to prevent open redirects
D. The redirect must use a permanent status code for browser caching

46 A product detail route should open as a modal when reached from a product list, but render as a full page after a direct URL entry or browser refresh. Which combination is required?

Intercepting Routes Hard
A. An intercepting route for soft navigation and a canonical page route
B. A rewrite from the list route to the product route
C. A client-side state flag and a global modal component
D. A parallel route without a separate product page

47 A modal opened through an intercepting route remains visible after the user presses the browser Back button. Which implementation detail is most likely missing?

Intercepting Routes Hard
A. The intercepted page must be statically generated
B. The modal route must use a server action
C. The route must disable all client-side transitions
D. The modal must close by navigating back through browser history

48 An API handler works in Node.js but fails after being configured for the Edge Runtime because it imports a package that depends on fs and Node's TCP APIs. What is the correct diagnosis?

Edge Runtime Hard
A. The route must be converted into a client component
B. The package violates Edge Runtime API constraints
C. The handler needs a longer request timeout
D. Edge handlers require a larger memory allocation

49 A globally distributed request handler performs a 700 ms database query against a single regional database. Moving the handler to the Edge Runtime does not improve median latency. Why?

Edge Runtime Hard
A. The database remains the dominant regional bottleneck
B. The browser bypasses the nearest edge location
C. Edge runtimes always serialize database requests
D. Edge requests cannot access databases

50 An application supports locale-prefixed URLs and must preserve a user's requested path when redirecting / to a detected locale. Which behavior avoids a common routing defect?

Internationalization Hard
A. Rewrite every locale request to a single unprefixed route
B. Always redirect / to the default locale
C. Redirect to the detected locale while preserving the normalized path
D. Infer locale only from the browser's time zone

51 A localized page is statically generated for en, fr, and de. A request arrives for fr-CA, which is configured as a fallback of fr. What is the most robust rendering strategy?

Internationalization Hard
A. Render the page in English because only exact locales are valid
B. Redirect all regional locales permanently to the base locale
C. Treat fr-CA as unrelated and return a 404
D. Use fr resources while preserving fr-CA formatting rules where supported

52 A team wants feature ownership to remain clear as a Next.js application grows. Which structure best supports localized changes and prevents unrelated domain code from accumulating in a global utilities folder?

Project Architecture Hard
A. Organize every file by extension under components, hooks, and utils
B. Place all server actions in one root file for centralized discovery
C. Put reusable and feature-specific components in the same global directory
D. Organize code by business feature with local components, data access, and tests

53 A route group is introduced to give authenticated pages a shared layout without changing their public URLs. Which statement correctly describes the purpose of route groups?

Project Architecture Hard
A. They force all grouped routes to use static rendering
B. They expose a new URL segment for each directory
C. They group routes structurally without adding path segments
D. They replace middleware-based authentication automatically

54 A server component fetches private data and passes a callback that closes over a secret-bearing object to a client component. Why is this design invalid or unsafe?

Component Organization Hard
A. Functions and secret-bearing values cannot cross the server-client boundary safely
B. Private data becomes cached automatically by every browser
C. Client components cannot receive any props from servers
D. Server components may only return plain HTML strings

55 A large interactive table causes an otherwise static page to become client-rendered. Which refactoring best preserves server rendering while retaining table interactivity?

Component Organization Hard
A. Move the entire page data fetch into the browser
B. Keep the page server-rendered and isolate table behavior in a client island
C. Duplicate the page as separate server and client implementations
D. Add use client to the root layout

56 A server action updates a user's email address. The form is rendered only for administrators, but a malicious client invokes the action directly. What control is essential inside the action?

Security Best Practices Hard
A. Hide the form from non-administrators
B. Recheck authentication and authorization on the server
C. Require JavaScript to be enabled in the browser
D. Obfuscate the action identifier in the client bundle

57 An application accepts a next query parameter after login and performs redirect(next). Which validation is strongest for preventing an attacker-controlled external redirect?

Security Best Practices Hard
A. Allow any absolute URL using HTTPS
B. Allow only normalized same-origin paths beginning with /
C. Reject values containing the substring javascript
D. URL-encode the value before passing it to redirect

58 A page displays user-submitted Markdown. The renderer permits raw HTML because some trusted authors need formatting. Which mitigation is required?

Security Best Practices Hard
A. Sanitize generated HTML with a strict allowlist before insertion
B. Render the content through a client component
C. Escape only the Markdown heading syntax
D. Add a CSP header without sanitizing the generated markup

59 A component test passes because it mocks the router, but production fails when a parallel route slot is missing during a hard refresh. Which test addition most directly covers the defect?

Testing Overview Hard
A. Increase snapshot test coverage for button labels
B. Mock more router methods in the existing unit test
C. Measure the component's rendering time under CPU throttling
D. Add an end-to-end test for direct entry and refresh of the route

60 A test verifies that an unauthorized user cannot access /admin. The implementation returns either a redirect or a 403 depending on whether the request is browser navigation or an API call. What assertion strategy is most resilient?

Testing Overview Hard
A. Assert that every request returns exactly status 302
B. Assert only that the response body contains the word unauthorized
C. Test each contract separately: redirect behavior for navigation and 403 for the API
D. Mock authorization so both paths return the same status