Overview
Introduction to Project Structure
Organizing your project correctly helps keep your code clean, maintainable, and easy for the system to understand. A standard project directory structure typically includes folders for your web pages, public assets, and configuration files. You can choose to place your application files directly under the project root or keep them neatly organized inside an optional src folder.
Key Directory Folders
Understanding where different files belong ensures your project builds and runs smoothly.
| Folder Name | Description |
|---|---|
app/ or pages/ | Contains your application pages, routing layouts, and user interface components. |
public/ | Stores static assets like images, icons, and files that are served directly to visitors. |
src/ | An optional folder that can wrap around your app/ or pages/ directories to keep the project root clean. |
Note
If you use both an app/ and a pages/ folder, they must both live under the exact same parent folder (either directly in the project root or both inside the src/ folder).
Placing Public Assets
To make images, logos, and other static files available to your visitors, store them in the public folder.
- Create a folder named
publicdirectly at your project root. - Place your static files (such as images or icons) inside this folder.
- Reference these assets in your code by pointing directly to the filename from the root (for example,
/next.svg).
Tip
The older static directory name is deprecated. Always use the public directory for your static assets.
Configuring Settings
Project-wide configuration files let you customize how your application behaves, builds, and formats code.
Supported configuration filenames include:
next.config.jsnext.config.mjsnext.config.tsnext.config.mts
Warning
Ensure configuration files and public asset folders are placed correctly at the project root level so the build tools can locate them automatically.