File Structure

For simple apps, you can define a basic file structure with a single pages/ directory.

For advanced apps, you may want to define several pages/ directories for what we call a domain-driven file structure.

Basic

# Landing page
/pages/index/+Page.js
/pages/index/components/SomeComponentForLandingPage.js
/pages/index/**/* # More files specific to the landing page
# About page
/pages/about/+Page.js
/pages/about/components/SomeComponentForAboutPage.js
/pages/about/**/* # More files specific to the about page
# Other pages
/pages/**/+Page.js
 
# Error page
/pages/_error/+Page.js
 
# Components shared by several pages
/components/
 
# Server code (Express.js/Fastify/...)
/server/

Domain-driven

# ===========================
# ======= Marketing =========
# ===========================
# Pages
(marketing)/pages/index/+Page.js      # URL: /
(marketing)/pages/about/+Page.js      # URL: /about
# Configs
(marketing)/pages/+Layout.js
(marketing)/pages/+prerender.js
# Components
(marketing)/components/ContactUs.js
 
# ===========================
# ===== Authentication ======
# ===========================
# Pages
auth/pages/signup/+Page.js            # URL: /auth/signup
auth/pages/login/+Page.js             # URL: /auth/login
# Configs
auth/pages/+Layout.js
# Components
auth/components/UserInfo.js
# Database
auth/database/fetchUser.js
 
# ===========================
# ===== Product pages =======
# ===========================
# Pages
products/pages/index/+Page.js         # URL: /products
products/pages/product/+Page.js       # URL: /product/@id
products/pages/product/+route.js
# Configs
products/pages/+Layout.js
products/pages/+ssr.js
# Database
products/database/fetchProduct.js
products/database/fetchProductList.js
 
# =============================
# ======= Shared/Misc =========
# =============================
# Components shared across all domains
components/
# Server code
server/

// /products/pages/product/+route.js
 
export default '/product/@id'

File Structure

Basic

Domain-driven

See also