Project structure overview in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

The app directory holds the main application code using the new App Router. It organizes pages, layouts, and server components in a nested folder structure.

beginner

What role does the public folder play in a Next.js project?

The <code>public</code> folder stores static files like images, icons, and fonts. These files are served directly at the root URL and do not require import statements.

beginner

Why is the node_modules folder important in Next.js projects?

The node_modules folder contains all installed packages and dependencies needed for the project to run. It is managed automatically by the package manager.

intermediate

What is the function of the next.config.js file?

The next.config.js file is used to customize and configure Next.js settings like routing, image optimization, and environment variables.

beginner

How does the package.json file support a Next.js project?

The package.json file lists project metadata, scripts, and dependencies. It helps manage packages and defines commands like npm run dev to start the development server.

Which folder in Next.js 14 contains the main app code using the App Router?

A public

B pages

C app

D components

The app folder is the new main directory for routing and components in Next.js 14.

Where should you put images that need to be served directly without import in Next.js?

A public

B components/assets

C app/images

D styles

Static files like images go into the public folder to be served directly.

What file do you edit to change Next.js configuration settings?

A next.config.js

B package.json

C app/layout.js

D README.md

The next.config.js file is for customizing Next.js settings.

Which file lists the dependencies and scripts for a Next.js project?

A public/index.html

B next.config.js

C app/page.js

D package.json

The package.json file manages dependencies and scripts.

What is the purpose of the node_modules folder?

A To hold static images

B To store installed packages and dependencies

C To write page components

D To configure environment variables

The node_modules folder contains all installed packages needed for the project.

Describe the main folders and files you find in a Next.js 14 project and their purposes.

Think about where code, static files, and settings live.

Explain how the app directory differs from the old pages directory in Next.js.

Focus on routing and layout differences.