Force-dynamic and force-static in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark a Next.js page as dynamic.

NextJS

export const dynamic = '[1]';

Drag options to blanks, or click blank then click option'

Aauto

Bforce-dynamic

Cdynamic

Dforce-static

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-static' which makes the page static instead of dynamic.

Using 'dynamic' without 'force-' prefix.

Using force-dynamic tells Next.js to always render the page dynamically on the server.

2fill in blank

medium

Complete the code to mark a Next.js page as static.

NextJS

export const dynamic = '[1]';

Drag options to blanks, or click blank then click option'

Aforce-static

Bstatic

Cforce-dynamic

Dauto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-dynamic' which makes the page dynamic instead of static.

Using 'static' without 'force-' prefix.

Using force-static tells Next.js to always render the page as static HTML.

3fill in blank

hard

Fix the error in the code to correctly force static rendering.

NextJS

export const dynamic = [1];

Drag options to blanks, or click blank then click option'

A'force-static'

B'force-dynamic'

C'static'

Dforce-static

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string value.

Using 'force-dynamic' instead of 'force-static'.

The value must be a string with quotes, so use 'force-static'.

4fill in blank

hard

Fill both blanks to create a Next.js page that is dynamic and uses a server component.

NextJS

export const dynamic = '[1]';

export default function [2]() {
  return <h1>Hello from dynamic page</h1>;
}

Drag options to blanks, or click blank then click option'

Aforce-dynamic

Bforce-static

CPage

DStaticPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-static' instead of 'force-dynamic'.

Naming the component something other than 'Page'.

Use force-dynamic to force dynamic rendering and name the component Page as Next.js expects.

5fill in blank

hard

Fill all three blanks to create a Next.js page that is static and uses a server component named StaticPage.

NextJS

export const dynamic = '[1]';

export default function [2]() {
  return <main>[3]</main>;
}

Drag options to blanks, or click blank then click option'

Aforce-dynamic

Bforce-static

CStaticPage

D<h1>Welcome to static page</h1>

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'force-dynamic' instead of 'force-static'.

Returning content outside of a valid JSX element.

Use force-static to force static rendering, name the component StaticPage, and return the heading inside the main tag.