Project Structure
This page provides an overview of the project structure of Circuit Parts application. It covers top-level files and folders, configuration files, and routing conventions within the app and pages directories.
Top-Level Folders
Top-level folders are used to organize your application's code and static assets.
| Path | Description |
|---|---|
app | Nextjs App Router |
components | React components for the website |
content | The content and static data for the website |
context | React context hooks for state management |
lib | Utility functions used by the application |
pages | Nextjs Pages Router |
public | Static assets to be served |
types | Typescript type definitions and interfaces |
.husky | Tool for managing git hooks |
Top-Level Files
Top-level files are used to configure your application, manage dependencies, run middleware, integrate monitoring tools, and define environment variables.
| File | Description |
|---|---|
next.config.js | Configuration file for Next.js |
package.json | Project dependencies and scripts |
middleware.ts | Next.js request middleware |
.env | Environment variables |
.env.local | Local environment variables |
.env.production | Production environment variables |
.env.development | Development environment variables |
.eslintrc.json | Configuration file for ESLint |
.eslintignore | Configuration file for ESLint to ignore specific files/folders |
.gitignore | Git files and folders to ignore |
tsconfig.json | Configuration file for TypeScript |
tailwind.config.ts | Configuration file for Tailwind CSS |
env.js | Configuration file for Environmental Variables |
Routing files
The following file conventions are used to define routes app router (opens in a new tab)
| Route | Extension | Description |
|---|---|---|
layout | .tsx | Layout |
page | .tsx | Page |
loading | .tsx | Loading UI |
not-found | .tsx | Not found UI |
error | .tsx | Error UI |
route | .ts | API endpoint |
Nested Route Conventions
| Route | Description |
|---|---|
folder | Route segment |
folder/folder | Nested Route segment |
Good to know: The following naming conventions are used for nested routes:
- If the route name is a single word:
folder. Example:checkout - If the route name uses multiple words:
folder-folder. Example:order-history
SEO File Conventions
| File | Extension | Description |
|---|---|---|
favicon | .ico | Favicon file |
sitemap | .ts | Dynamic site map generater |
robots | .txt | Robots file for search engines |
Lib Folder
| File/Directory | Description |
|---|---|
constants | Global constants used by the application |
redux | Redux reducers and config files |
schema | Yup and zod schema files |
server-actions | Nextjs server actions |
utils.ts | Utility functions used accross the application. |