Dynamic rendering triggers in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a Next.js page that uses static generation.

NextJS

export async function [1]() {
  return { props: { message: 'Hello' } };
}

export default function Home({ message }) {
  return <h1>{message}</h1>;
}

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

AgetServerSideProps

BgetStaticProps

CgetInitialProps

DgetStaticPaths

Attempts:

3 left

💡 Hint

Common Mistakes

Using getServerSideProps when static generation is needed

Confusing getStaticPaths with getStaticProps

The getStaticProps function tells Next.js to generate the page at build time (static generation).

2fill in blank

medium

Complete the code to export a Next.js page that uses server-side rendering.

NextJS

export async function [1](context) {
  return { props: { time: new Date().toISOString() } };
}

export default function TimePage({ time }) {
  return <p>Current time: {time}</p>;
}

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

AgetStaticPaths

BgetStaticProps

CgetInitialProps

DgetServerSideProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using getStaticProps which only runs at build time

Confusing getServerSideProps with getStaticPaths

The getServerSideProps function runs on each request, enabling server-side rendering.

3fill in blank

hard

Fix the error in the code to enable dynamic rendering with fallback blocking.

NextJS

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: [1]
  };
}

export async function getStaticProps({ params }) {
  return { props: { id: params.id } };
}

export default function Page({ id }) {
  return <p>ID: {id}</p>;
}

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

Atrue

Bfalse

C'blocking'

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using true or false instead of 'blocking' for fallback

Leaving fallback undefined which causes errors

Setting fallback to 'blocking' enables dynamic rendering where the page is generated on demand and cached.

4fill in blank

hard

Fill both blanks to create a Next.js API route that triggers revalidation for a page.

NextJS

export default async function handler(req, res) {
  await res.[1]('/path-to-revalidate');
  res.status([2]).json({ message: 'Revalidated' });
}

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

Arevalidate

B200

C404

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.send instead of res.revalidate

Sending 404 status instead of 200

The res.revalidate method triggers Next.js to regenerate the page at the given path. Then a 200 status is sent to confirm success.

5fill in blank

hard

Fill both blanks to create a Next.js page that uses ISR with revalidate time and fallback blocking.

NextJS

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: [1]
  };
}

export async function getStaticProps() {
  return {
    props: { time: new Date().toISOString() },
    revalidate: [2]
  };
}

export default function ISRPage({ time }) {
  return <p>Generated at: {time}</p>;
}

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

Afalse

B10

C'blocking'

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using true or false for fallback instead of 'blocking'

Setting revalidate to zero or a string

Setting fallback to 'blocking' enables on-demand page generation. The revalidate value sets the seconds before regeneration to 10.