Interleaving server and client in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the React hook needed for client-side state.

NextJS

import React, { [1] } from 'react';

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

AuseContext

BuseEffect

CuseState

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing useEffect which is for side effects, not state.

Choosing useContext which is for context, not local state.

The useState hook is used to manage client-side state in React components.

2fill in blank

medium

Complete the code to mark a React component as a client component in Next.js.

NextJS

"use client";

export default function MyComponent() {
  return <div>Hello from [1] component!</div>;
}

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

Aserver

Bdynamic

Cstatic

Dclient

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'server' which is the opposite of client.

Confusing 'static' or 'dynamic' with client/server.

Adding "use client"; at the top marks the file as a client component in Next.js.

3fill in blank

hard

Fix the error in the code by completing the import statement for a server component.

NextJS

import [1] from 'next/headers';

export default function ServerComp() {
  return <h1>Server Component</h1>;
}

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

Acookies

BLink

Cheaders

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Importing client hooks like useState in server components.

Importing UI components like Link which are client-side.

The cookies import from 'next/headers' is used in server components to access cookies.

4fill in blank

hard

Fill both blanks to create a client component that uses state and an event handler.

NextJS

"use client";

import React, { [1] } from 'react';

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

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

AuseState

BuseEffect

CuseRef

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using different hooks for import and usage.

Confusing useEffect with useState.

The useState hook is imported and used to create state in the client component.

5fill in blank

hard

Fill all three blanks to create a server component that fetches data and a client component that uses it.

NextJS

import ClientComp from './ClientComp';

export default async function ServerComp() {
  const data = await fetch('/api/data').then(res => res.json());
  return (
    <main>
      <h1>Data:</h1>
      <ClientComp [1]=[2] />
      <p>Fetched on the [3]</p>
    </main>
  );
}

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

Adata

Cserver

Dclient

Attempts:

3 left

💡 Hint

Common Mistakes

Passing wrong prop names or values.

Saying data was fetched on the client instead of server.

The server component passes the fetched data as a prop to the client component and notes that data was fetched on the server.