Why patterns improve architecture in NextJS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use design patterns in Next.js architecture?

Which of the following best explains why using design patterns improves the architecture of a Next.js application?

A They allow the application to run without any dependencies.

B They provide a common language and structure, making the code easier to understand and maintain.

C They eliminate the need for testing by ensuring code is always correct.

D They force developers to write more code, which improves performance.

💡 Hint

Think about how patterns help teams work together and keep code organized.

Design patterns offer proven solutions and a shared vocabulary. This helps developers understand each other's code and maintain it more easily over time.

❓ component_behavior

intermediate

How does the Container-Presenter pattern improve Next.js components?

In Next.js, what is the main benefit of separating components into Container and Presenter parts?

A It separates data fetching and logic from UI rendering, making components easier to test and reuse.

B It combines all logic and UI in one component to reduce file count.

C It forces all components to be class-based for better lifecycle control.

D It disables server-side rendering to improve client performance.

💡 Hint

Think about how separating concerns helps keep code clean and testable.

The Container-Presenter pattern splits responsibilities: Containers handle data and logic, Presenters handle UI. This separation makes components simpler and easier to maintain.

📝 Syntax

advanced

Identify the correct Next.js data fetching pattern

Which option correctly uses the getServerSideProps function to fetch data for a page in Next.js?

A export async function getServerSideProps() { const data = fetch('https://api.example.com/data').json(); return { props: { data } }; }

B export async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = res.json(); return { props: data }; }

C export function getServerSideProps() { const data = fetch('https://api.example.com/data').then(res => res.json()); return { props: { data } }; }

D export async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = await res.json(); return { props: { data } }; }

💡 Hint

Remember that getServerSideProps must return an object with a props key containing an object.

Option D correctly awaits the fetch and json calls, then returns an object with props containing the data. Other options either miss await or return incorrect structures.

🔧 Debug

advanced

Find the cause of hydration mismatch in Next.js

Given this Next.js component, why does it cause a hydration mismatch error?

export default function Counter() {
  const [count, setCount] = React.useState(Math.floor(Math.random() * 10));
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

A The initial state uses a random value, causing server and client to render different content.

B The button's onClick handler is missing parentheses, causing a syntax error.

C The component is missing a key prop on the div element.

D React.useState cannot be used inside functional components.

💡 Hint

Think about what happens when server and client render different initial values.

Using Math.random() in initial state causes the server to render one value and the client another, leading to hydration mismatch errors.

❓ lifecycle

expert

When does useEffect run in Next.js Server Components?

In Next.js 14+, which statement about useEffect in Server Components is true?

A <code>useEffect</code> runs only if the component is wrapped in <code>React.StrictMode</code>.

B <code>useEffect</code> runs on the server during initial render and on the client after hydration.

C <code>useEffect</code> does not run in Server Components because they render on the server only.

D <code>useEffect</code> runs before the component renders on the server.

💡 Hint

Recall the difference between Server and Client Components in Next.js.

Server Components render only on the server and do not run client-side hooks like useEffect. useEffect runs only in Client Components after hydration.