Project Structure
This page provides an overview of the project structure. It covers top-level files and folders, configuration files, and routing conventions.
Top-level folders
Top-level folders are used to organize your application's code and static assets.
| public | Static assets to be served |
| src | Source folder |
Top-level files
Top-level files are used to configure your application, manage dependencies, run middleware, integrate monitoring tools, and define environment variables.
- ...
- components.json
- next.confing.js
- package.json
- postcss.config.js
- tailwindcss.config.js
- tsconfig.json
- webpack.config.js
| components.json | Component metadata and configuration |
| next.config.js | Next.js configuration file |
| package.json | Project dependencies and scripts |
| postcss.config.js | PostCSS configuration |
| tailwindcss.config.js | Tailwind CSS configuration |
| theme.config.jsx | Theme settings for the project |
| tsconfig.json | TypeScript configuration |
| webpack.config.js | Webpack bundler configuration |
components.json is generated by shadcn (opens in a new tab)
postcss.config.js, tailwindcss.confing.js is generated by tailwindcss (opens in a new tab)
src folder
This folder is the entry to the application.
| app | Next.js App Router and entry points |
| assets | Public static files like images and fonts |
| components | Reusable UI components |
| context | Global state management with React Context |
| lib | Helper functions and utilities |
app folder
- global.css
- layout.tsx
- providers.tsx
This folder serves as the app entry point. To learn about NextJs app routing please visit https://nextjs.org (opens in a new tab)
components folder
- ..
- button.tsx
- ..
This folder serves as the repository for your global custom components, as well as Shadcn components. To explore Shadcn components in detail, please visit ui.shadcn.com (opens in a new tab)