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.

Practice

1. Which React hook in Next.js is primarily used to trigger a component re-render when data changes dynamically?

easy

A. useRef

B. useEffect

C. useState

D. useContext

Solution

1. Step 1: Understand the purpose of useState

   useState creates a state variable that, when updated, triggers a re-render of the component.

2. Step 2: Compare with other hooks

   useEffect runs side effects but does not itself trigger re-renders; useRef holds mutable values without causing re-renders; useContext shares data but depends on context changes.

3. Final Answer:

   useState -> Option C

4. Quick Check:

   State change triggers re-render = useState [OK]

Hint: State updates cause re-render; useState manages state [OK]

Common Mistakes:

• Confusing useEffect as a trigger for re-render
• Using useRef expecting re-render on change
• Thinking useContext alone triggers re-render

2. Which of the following is the correct syntax to update state in a Next.js functional component using useState?

easy

A. const [count, setCount] = useState(0); setCount = 5;

B. const [count, setCount] = useState(0); setCount(5);

C. const count = useState(0); count = 5;

D. const [count, setCount] = useState(0); count(5);

Solution

1. Step 1: Review correct useState syntax

   useState returns an array with current state and a setter function. The setter function is called with the new value to update state.

2. Step 2: Identify correct setter usage

   Only setCount(5); correctly calls the setter function. Assigning directly to setCount or count is invalid.

3. Final Answer:

   const [count, setCount] = useState(0); setCount(5); -> Option B

4. Quick Check:

   Call setter function with new value = setCount(5) [OK]

Hint: Call setter function like setCount(newValue) [OK]

Common Mistakes:

• Assigning value directly to setter function
• Trying to call state variable as a function
• Ignoring array destructuring from useState

3. Given the following Next.js component, what will be displayed after clicking the button twice?

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <>
      
Count: {count}
       setCount(count + 1)}>Increment
    </>
  );
}

medium

A. Count: 2

B. Count: 1

C. Count: 0

D. Count: NaN

Solution

1. Step 1: Understand initial state and button action

   Initial count is 0. Each button click calls setCount(count + 1), increasing count by 1.

2. Step 2: Calculate count after two clicks

   After first click: count = 1; after second click: count = 2.

3. Final Answer:

   Count: 2 -> Option A

4. Quick Check:

   Increment twice from 0 = 2 [OK]

Hint: Each click adds 1 to count state [OK]

Common Mistakes:

• Assuming state does not update immediately
• Confusing initial value with updated value
• Expecting NaN due to wrong state usage

4. Identify the error in this Next.js component that tries to update state on button click:

import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('');

  function handleClick() {
    value = 'Updated';
  }

  return (
    <>
      
{value}
      Update
    </>
  );
}

medium

A. Missing import of React

B. useState initial value must be a number

C. Button onClick should be a string

D. Directly assigning to state variable instead of using setter

Solution

1. Step 1: Check how state is updated

   The function handleClick assigns directly to value, which is a state variable and read-only.

2. Step 2: Correct way to update state

   State must be updated by calling the setter function setValue('Updated') to trigger re-render.

3. Final Answer:

   Directly assigning to state variable instead of using setter -> Option D

4. Quick Check:

   Use setter function to update state [OK]

Hint: Never assign state variable directly; use setter function [OK]

Common Mistakes:

• Assigning state variable directly
• Forgetting to call setter function
• Confusing state variable with setter

5. You want a Next.js component to fetch user data dynamically when the component mounts and update the UI accordingly. Which approach correctly triggers dynamic rendering and cleans up properly?

import { useState, useEffect } from 'react';

export default function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let isMounted = true;
    fetch('/api/user')
      .then(res => res.json())
      .then(data => {
        if (isMounted) setUser(data);
      });
    return () => { isMounted = false; };
  }, []);

  if (!user) return <p>Loading...</p>;
  return <p>Hello, {user.name}!</p>;
}

hard

A. Correct: fetch in useEffect with cleanup flag to avoid setting state after unmount

B. Incorrect: fetch outside useEffect causes infinite re-renders

C. Incorrect: setting state directly without useEffect causes errors

D. Incorrect: missing dependency array causes fetch to run once

Solution

1. Step 1: Analyze data fetching inside useEffect

   Fetching data inside useEffect with empty dependency array runs once on mount, triggering dynamic rendering when data arrives.

2. Step 2: Understand cleanup with isMounted flag

   The isMounted flag prevents setting state if the component unmounts before fetch completes, avoiding memory leaks or errors.

3. Final Answer:

   Correct: fetch in useEffect with cleanup flag to avoid setting state after unmount -> Option A

4. Quick Check:

   Fetch in useEffect + cleanup = safe dynamic update [OK]

Hint: Use useEffect with cleanup to fetch and update safely [OK]

Common Mistakes:

• Fetching data outside useEffect causing repeated renders
• Not cleaning up async calls causing memory leaks
• Missing dependency array causing multiple fetches