Project structure overview in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the purpose of the app directory in Next.js 14?

In Next.js 14, what is the main role of the app directory in a project?

A It holds configuration files like <code>next.config.js</code> and environment variables.

B It contains server components and routes that define the app's UI and navigation.

C It stores static assets like images and fonts for the project.

D It is used only for API routes and backend logic.

💡 Hint

Think about where you define pages and layouts in Next.js 14.

The app directory is where you create server components and define routes using folders and files. It controls the UI structure and navigation.

❓ component_behavior

intermediate

What happens if you place a page file outside the app directory?

In a Next.js 14 project, what will happen if you create a page file like page.tsx outside the app directory?

A The page will not be recognized and will not be part of the routing system.

B The page will work normally and be accessible via URL.

C Next.js will throw a build error preventing the app from running.

D The page will be treated as an API route.

💡 Hint

Where does Next.js expect page files in the new app router?

Next.js 14 expects page files inside the app directory. Files outside are ignored for routing.

📝 Syntax

advanced

Identify the correct file to define a layout for all pages in Next.js 14

Which file should you create inside the app directory to define a layout that wraps all pages in your Next.js 14 app?

A <code>page.tsx</code>

B <code>app.tsx</code>

C <code>layout.tsx</code>

D <code>root.tsx</code>

💡 Hint

Layouts wrap pages and share UI like headers or footers.

The layout.tsx file inside the app directory defines a layout component that wraps all nested pages and components.

🔧 Debug

advanced

Why does this Next.js 14 project fail to load the homepage?

Given this project structure: - app/ - layout.tsx - home.tsx Why does the homepage not load at the root URL?

A Because the homepage file must be named <code>page.tsx</code>, not <code>home.tsx</code>.

B Because <code>layout.tsx</code> is missing a default export.

C Because the <code>app</code> directory must be named <code>pages</code>.

D Because the <code>home.tsx</code> file must be inside a folder named <code>home</code>.

💡 Hint

Next.js uses specific file names for routing.

Next.js 14 requires the homepage file to be named page.tsx inside the app directory to serve it at the root URL.

❓ lifecycle

expert

How does Next.js 14 handle server and client components in the app directory?

In Next.js 14, how does the framework decide which components in the app directory run on the server versus the client?

A Next.js runs all components on both server and client automatically without distinction.

B All components run on the client unless wrapped in a special <code>ServerComponent</code> tag.

C Components run on the server or client based on their file extension: <code>.server.tsx</code> or <code>.client.tsx</code>.

D By default, components are server components unless marked with <code>'use client'</code> at the top to run on the client.

💡 Hint

Look for a special directive string at the top of files.

Next.js 14 treats components as server components by default. Adding 'use client' at the top marks them as client components.