> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/01.-setup/1.-folder-structure.md).
# 1. Folder Structure
This document explains the folder structure of a project developed using Next.js.
It explains the various roles of each folder's composition, helping you understand the project's structure.
***
The top-level folders consist of `src` and `public`. Below is a detailed description of each folder and file.
| /x2bee-storefront | | | | | |
| -------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------- | -------------------- | -------------------- |
| src | | | | | |
| | api | Write business API requests | | | |
| | | claim | Return/refund processing api | | |
| | | common | Common api | | |
| | | customer | Customer api | | |
| | | delivery | Delivery api | | |
| | | display | Display api | | |
| | | event | Event api | | |
| | | goods | Goods api | | |
| | | member | Member api | | |
| | | mypage | Logged-in user info api | | |
| | | order | Order api | | |
| | | search | Search api | | |
| | app | App Router's folder-based routing | | | |
| | | (common) | App Router's common feature folder | | |
| | | | actions | server action folder | |
| | | | | serverCookie.ts | server cookie action |
| | | (locale) | App Router's folder-based routing (multilingual support applied) | | |
| | | | (root) | root folder | |
| | | | | layout.tsx | common layout |
| | | | | (home) | Main Page |
| | | | | claim | Return/Refund Page |
| | | | | common | Common Page |
| | | | | customer | Customer Page |
| | | | | display | Display Page |
| | | | | event | Event Page |
| | | | | login | Login Page |
| | | | | member | Member Page |
| | | | | order | Order Page |
| | | | layout.tsx | root layout | |
| | | | error.tsx | root error Page | |
| | | \[…not\_found] | Not-found page folder | | |
| | | | layout.tsx | Not-found Page | |
| | | goods | Goods Page | | |
| | | | layout.tsx | Goods Page layout | |
| | | | | detail | Goods Detail Page |
| | | payment | Payment Page | | |
| | | | layout.tsx | Goods detail layout | |
| | | search | Search Page | | |
| | assets | css | | | |
| | constants | Defines constant values | | | |
| | components | Defines each reusable component related to the app folder | | | |
| | | claim | Return/Refund component | | |
| | | common | Common component | | |
| | | customer | Customer component | | |
| | | delivery | Delivery component | | |
| | | display | Display component | | |
| | | event | Event component | | |
| | | fo | fo component | | |
| | | goods | Goods component | | |
| | | member | Member component | | |
| | | order | Order component | | |
| | | ui | ui component (button, calendar, accordion, etc.) | | |
| | data | Common data used by the app | | | |
| | | i18n | Multilingual data | | |
| | hooks | custom hooks | | | |
| | lib | plugins, various libraries | | | |
| | models | Manages TS models by business domain | | | |
| | store | Manages Zustand state | | | |
| | types | Folder for TypeScript type declarations | | | |
| | utils | util | | | |
| | i18n.ts | Multilingual configuration file | | | |
| | middleware.ts | Middleware file | | | |
| | navigation.ts | Multilingual navigation configuration file | | | |
| public | public folder for images, etc. | | | | |
| | images | image files (including svg and icon files) | | | |
| .env.development.set | npm build:dev, start:dev
(development environment configuration file)
| | | | |
| .env.local.set | npm start:local (local environment configuration file) | | | | |
| .env.production.set | npm build:prd, start:prd
(production environment configuration file)
| | | | |
| .env.stage.local | npm build:stg, start:stg
(stage environment configuration file)
| | | | |
| .eslintrc.json | ESLint configuration and rules excluded from ESLint | | | | |
| .gitignore | List of files excluded from git commits | | | | |
| .pretterrc | Prettier configuration to prevent conflicts between ESLint and Prettier | | | | |
| next-env.d.ts | File for Next.js TypeScript declarations | | | | |
| next.config.js | Next.js config settings | | | | |
| package.json | Various package / dependency information | | | | |
| README.md | README file for GitLab | | | | |
| tailwind.config.ts | config for Tailwind CSS | | | | |
* /x2bee-storefront
* src
* api — Write business API requests
* claim — Return/refund processing api
* common — Common api
* customer — Customer api
* delivery — Delivery api
* display — Display api
* event — Event api
* goods — Goods api
* member — Member api
* mypage — Logged-in user info api
* order — Order api
* search — Search api
* app — App Router's folder-based routing
* (common) — App Router's common feature folder
* actions — server action folder
* `serverCookie.ts` — server cookie action
* (locale) — App Router's folder-based routing (multilingual support applied)
* (root) — root folder
* `layout.tsx` — common layout
* (home) — Main Page
* claim — Return/Refund Page
* common — Common Page
* customer — Customer Page
* display — Display Page
* event — Event Page
* login — Login Page
* member — Member Page
* order — Order Page
* `layout.tsx` — root layout
* `error.tsx` — root error Page
* \[…not\_found] — Not-found page folder
* `layout.tsx` — Not-found Page
* goods — Goods Page
* `layout.tsx` — Goods Page layout
* detail — Goods Detail Page
* payment — Payment Page
* `layout.tsx` — Goods detail layout
* search — Search Page
* assets
* css
* constants — Defines constant values
* components — Defines each reusable component related to the app folder
* claim — Return/Refund component
* common — Common component
* customer — Customer component
* delivery — Delivery component
* display — Display component
* event — Event component
* fo — fo component
* goods — Goods component
* member — Member component
* order — Order component
* ui — ui component (button, calendar, accordion, etc.)
* data — Common data used by the app
* i18n — Multilingual data
* hooks — custom hooks
* lib — plugins, various libraries
* models — Manages TS models by business domain
* store — Manages Zustand state
* types — Folder for TypeScript type declarations
* utils — util
* `i18n.ts` — Multilingual configuration file
* `middleware.ts` — Middleware file
* `navigation.ts` — Multilingual navigation configuration file
* public — public folder for images, etc.
* images — image files (including svg and icon files)
* Environment configuration files
* `.env.development.set` — npm build:dev, start:dev (development environment configuration file)
* `.env.local.set` — npm start:local (local environment configuration file)
* `.env.production.set` — npm build:prd, start:prd (production environment configuration file)
* `.env.stage.local` — npm build:stg, start:stg (stage environment configuration file)
* Other configuration files
* `.eslintrc.json` — ESLint configuration and rules excluded from ESLint
* `.gitignore` — List of files excluded from git commits
* `.pretterrc` — Prettier configuration to prevent conflicts between ESLint and Prettier
* `next-env.d.ts` — File for Next.js TypeScript declarations
* `next.config.js` — Next.js config settings
* `package.json` — Various package / dependency information
* `README.md` — README file for GitLab
* `tailwind.config.ts` — config for Tailwind CSS
Document generated by Confluence on 2025-12-18, 2:13 AM