Problem Statement
Explain the typical folder structure of a Next.js application and the purpose of key directories.
Explanation
A typical Next.js project has a pages or app directory for routes, public directory for static assets served at the root URL like images and fonts, components directory for reusable React components, styles directory for CSS files, and lib or utils for utility functions.
The pages/_app.js file wraps all pages and is used for global styles and providers, while pages/_document.js customizes the HTML document structure. The public folder content is accessible at the root path, so public/logo.png is available at /logo.png.
In App Router projects, the app directory contains page.js, layout.js, loading.js, and error.js files that define routes and their UI states.
