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.

Practice

1. What is the main purpose of the app/ folder in a Next.js project?

easy

A. To organize pages, layouts, and API routes

B. To store static files like images and fonts

C. To hold configuration files like next.config.js

D. To keep test files and mocks

Solution

1. Step 1: Understand the role of app/ folder

   The app/ folder is designed to organize the main parts of the app such as pages, layouts, and API routes.

2. Step 2: Compare with other folders

   The public/ folder holds static files, and config files are outside app/. So, app/ is for app structure.

3. Final Answer:

   To organize pages, layouts, and API routes -> Option A

4. Quick Check:

   app/ folder = organize pages/layouts/API [OK]

Hint: Remember: app/ is your app's main structure folder [OK]

Common Mistakes:

• Confusing app/ with public/
• Thinking config files go inside app/
• Assuming app/ holds only pages, ignoring layouts and APIs

2. Which folder should you place an image file in a Next.js project to serve it statically?

easy

A. app/

B. api/

C. components/

D. public/

Solution

1. Step 1: Identify static file storage

   Static files like images should be placed in the public/ folder so they can be served directly.

2. Step 2: Exclude other folders

   app/ is for pages/layouts, components/ is for React components, and api/ is for backend routes, so none are for static files.

3. Final Answer:

   public/ -> Option D

4. Quick Check:

   Static files = public/ folder [OK]

Hint: Static files go in public/ folder, not app/ [OK]

Common Mistakes:

• Putting images inside app/ folder
• Confusing components/ with static file storage
• Trying to serve images from api/ folder

3. Given this Next.js project structure:

app/
  layout.js
  page.js
public/
  logo.png

Which statement is true about accessing logo.png in the browser?

medium

A. You can access it at /logo.png

B. You must import it in page.js to use it

C. It is not accessible because it's inside public/

D. You can access it at /app/logo.png

Solution

1. Step 1: Understand public/ folder behavior

   Files in public/ are served at the root URL path, so logo.png is accessible at /logo.png.

2. Step 2: Check other options

   Importing is optional for static files; app/ folder files are not served as static assets, so /app/logo.png is invalid.

3. Final Answer:

   You can access it at /logo.png -> Option A

4. Quick Check:

   public/ files = root URL access [OK]

Hint: Static files in public/ map to root URL path [OK]

Common Mistakes:

• Thinking you must import static files to access them
• Trying to access static files via /app/ path
• Assuming public/ files are not accessible

4. You see this error in your Next.js app: "Module not found: Can't resolve './logo.png'". Your project has logo.png inside public/. What is the likely cause?

medium

A. You placed logo.png inside app/ instead of public/

B. You tried to import logo.png from public/ using a relative path

C. The logo.png file is missing from public/

D. Next.js does not support PNG images

Solution

1. Step 1: Understand how to use files in public/

   Files in public/ are accessed via URL paths, not imported with relative paths in code.

2. Step 2: Identify the error cause

   Trying to import logo.png with a relative path causes "Module not found" error because public/ files are not part of the module system.

3. Final Answer:

   You tried to import logo.png from public/ using a relative path -> Option B

4. Quick Check:

   Importing public/ files = error [OK]

Hint: Don't import public/ files; use URL paths instead [OK]

Common Mistakes:

• Importing static files from public/ folder
• Assuming public/ files are part of module imports
• Thinking Next.js can't serve PNG images

5. You want to create a new page with a custom layout in your Next.js app. Where should you place the layout and page files to follow the recommended project structure?

hard

A. Place both files inside components/ folder

B. Put layout.js in public/ and page.js in app/

C. Place both layout.js and page.js inside a new folder under app/

D. Put page.js in app/ and layout.js in api/

Solution

1. Step 1: Recall Next.js app folder structure

   In Next.js, pages and their layouts are organized inside folders under app/ to group related files.

2. Step 2: Exclude incorrect placements

   public/ is for static files, components/ is for reusable UI parts, and api/ is for backend routes, so these are not correct for layouts/pages.

3. Final Answer:

   Place both layout.js and page.js inside a new folder under app/ -> Option C

4. Quick Check:

   Layouts and pages live together under app/ [OK]

Hint: Keep layouts and pages together inside app/ folders [OK]

Common Mistakes:

• Putting layouts in public/ or api/
• Separating layout and page files into unrelated folders
• Confusing components/ with page structure