Project structure overview in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main layout component from the app directory.

NextJS

import Layout from './[1]/layout';

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

Aapp

Bpages

Ccomponents

Dpublic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pages' folder which is for the old routing system.

Trying to import from 'public' which holds static files.

The app directory is the root for Next.js 14+ app router files, including layouts.

2fill in blank

medium

Complete the code to define a server component in Next.js app router.

NextJS

export default function Home() {
  return <main>[1]</main>;
}

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

A"Welcome to Next.js"

B<h1>Welcome to Next.js</h1>

Cconsole.log('Welcome')

Dreturn <h1>Welcome</h1>

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a string instead of JSX.

Using console.log inside the return statement.

Server components return JSX elements directly, like <h1>Welcome</h1>.

3fill in blank

hard

Fix the error in the Next.js page component export.

NextJS

const page = () => {
  return <div>Hello World</div>;
};

export default [1];

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

APage()

BPage

Cpage()

Dpage

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Page' when the function is lowercase 'page'.

Adding parentheses after the function name in export.

The exported component must match the declared function name exactly without parentheses.

4fill in blank

hard

Fill both blanks to create a client component with state in Next.js.

NextJS

"use client";

import { [1] } from 'react';

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

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

AuseState

BuseEffect

CuseState()

DuseEffect()

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useEffect instead of useState.

Calling the hook inside the import statement.

We import useState hook and call it as useState(0) to create state.

5fill in blank

hard

Fill all three blanks to create a dynamic route page that fetches data in Next.js.

NextJS

export async function [1]({ params }) {
  const data = await fetch(`/api/[2]/${params.id}`);
  const item = await data.json();
  return <div>{item.[3]</div>;
}

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

APage

BgetServerSideProps

Cname

DgetData

Attempts:

3 left

💡 Hint

Common Mistakes

Using getServerSideProps which is for pages router.

Using wrong API path or property name.

In Next.js app router, dynamic route [id]/page.tsx exports an async Page function that receives { params } and can fetch data server-side. The API path is '/api/getData/[id]' and we display the 'name' property.