App directory (App Router) in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The app directory organizes your application’s UI and routing using React Server Components. It replaces the older pages directory and allows for nested layouts, server rendering, and improved routing control.

beginner

How do you define a route in the Next.js app directory?

Each folder inside the app directory corresponds to a route segment. A file named page.jsx or page.tsx inside a folder defines the component rendered for that route.

intermediate

What is a layout in the Next.js App Router and how is it used?

A layout is a React component named layout.jsx or layout.tsx inside a folder in app. It wraps pages and nested routes, allowing shared UI like headers or footers to persist across pages.

intermediate

Explain the difference between Server Components and Client Components in the Next.js App Router.

Server Components run on the server and can fetch data directly, improving performance. Client Components run in the browser and handle interactivity. You mark Client Components with "use client" at the top of the file.

intermediate

How does Next.js handle loading states in the App Router?

You can create a loading.jsx or loading.tsx file inside a route folder to show a loading UI while the page or data is loading. This improves user experience by showing feedback during navigation.

In Next.js App Router, which file defines the UI for a route?

A route.js

B page.jsx

C app.js

D index.js

The page.jsx file inside a folder in the app directory defines the UI for that route.

What file do you add to share UI like headers across multiple pages in Next.js App Router?

A shared.jsx

B header.jsx

C layout.jsx

D app.jsx

The layout.jsx file wraps pages and nested routes to share UI elements like headers or footers.

How do you mark a component as a Client Component in Next.js App Router?

A Use a special ClientComponent wrapper

B Name the file client.jsx

C Import React from 'client'

D Add "use client" at the top of the file

Adding "use client" at the top of the file marks it as a Client Component.

Where do you place a loading.jsx file in Next.js App Router?

A Inside the route folder to show loading UI for that route

B In the root <code>app</code> directory only

C Next to <code>page.jsx</code> but outside any folder

D In the <code>public</code> folder

Placing loading.jsx inside a route folder shows a loading UI while that route is loading.

What is the main advantage of Server Components in Next.js App Router?

A They run on the server and can fetch data directly

B They run faster in the browser

C They allow client-side routing

D They enable CSS styling

Server Components run on the server and can fetch data directly, improving performance and reducing client bundle size.

Describe how routing works in the Next.js App Router using the app directory structure.

Think about how folders and files map to URLs and UI.

Explain the difference between Server Components and Client Components in Next.js App Router and when to use each.

Consider where the code runs and what it does.