Advanced Next.js test (Advanced)

Sample questions

5 sample questions from the Advanced Next.js test, with the answers. Samples are taken out of the live test, so you will not meet these when you sit it.

1. Which of the following is the correct method to trigger on-demand revalidation of a specific path in Next.js?

   1. revalidatePath('/blog', 60)
   2. revalidate('/blog')
   3. revalidateTag('blog')
   4. revalidatePath('/blog')

   Answer: D. revalidatePath('/blog')

   In Next.js, `revalidatePath('/blog')` is used to trigger on-demand revalidation of a specific path. This is typically called from a Server Action or Route Handler after a CMS webhook. The other options are not valid methods for triggering revalidation in this context.

2. How can you annotate a request for tracing in the Edge runtime of Next.js?

   1. Use `console.log()` to log request details for tracing purposes.
   2. Use the `fetch` API with `next: { tags: ['trace'] }` to annotate the request for tracing.
   3. Use `next.config.js` to enable tracing for all requests.
   4. Use the `trace` method on the `Request` object for tracing.

   Answer: B. Use the `fetch` API with `next: { tags: ['trace'] }` to annotate the request for tracing.

   In the Edge runtime, you can use the `fetch` API with the `next` option to annotate requests for tracing by adding a tag like `tags: ['trace']`. This helps in monitoring and debugging requests in a production environment. Other options like using `console.log()` or `next.config.js` are not specific to request tracing in the Edge runtime.

3. In Next.js, when multiple revalidation values are set for a route (e.g., in a page, layout, or fetch), which value takes precedence?

   1. The revalidate value set in getStaticPaths takes precedence
   2. The highest revalidate value in a route wins
   3. The revalidate value set in getStaticProps takes precedence
   4. The lowest revalidate value in a route wins

   Answer: D. The lowest revalidate value in a route wins

   In Next.js, when multiple revalidation values are set (e.g., in a page, layout, or fetch), the lowest revalidate value in the route takes precedence, ensuring the most frequent regeneration of the page.

4. What is the likely issue if the fallback UI is not displayed when using Incremental Static Regeneration (ISR) with a `loading.tsx` file or a `<Suspense>` boundary?

   1. The fallback UI is not needed, as the data is fetched synchronously.
   2. The fallback UI displays immediately, but the page is not rendered until the data is fetched.
   3. The fallback UI will not display until the data is fully fetched, causing a delay in rendering the page.
   4. The fallback UI is displayed, but the page is rendered before the data is fetched.

   Answer: C. The fallback UI will not display until the data is fully fetched, causing a delay in rendering the page.

   In Next.js, when using `loading.tsx` or a manual `<Suspense>` boundary, the fallback UI should display immediately while the data is being fetched. If the fallback UI is not displaying, it may be due to incorrect implementation, such as not using `loading.tsx` or not wrapping the component in a `<Suspense>` boundary.

5. In Next.js, when multiple revalidation settings are applied (e.g., in a page, layout, or fetch call), which rule determines the effective revalidation period for the route?

   1. The lowest revalidate value in a route wins
   2. Revalidate values are averaged across the route
   3. The highest revalidate value in a route wins
   4. Revalidate values are ignored if a tag is used

   Answer: A. The lowest revalidate value in a route wins

   In Next.js, when multiple revalidation settings are applied (e.g., in a page, layout, or fetch call), the lowest revalidate value takes precedence and determines the revalidation period for the route.