File structure

We recommend the following file structure:

Next App

My-App
├─ public // see nextjs documentation
│  ├─ locales
│  │  └─ en
│  │  │  └─ translation.json // locales in english
│  │  └─ fr
│  │  │  └─ translation.json // locales in french
│  ├─ logo.svg 
│  ├─ robots.txt 
│  └─ ... // You are free to create your own structure 
│
├─ src
│  ├─ components // folder containing all components but routes
│  │  ├─ myComponent // a folder is created for each standalone component (camelCase)
│  │  │  ├─ myComponentHeader // Each slave component has its own folder
│  │  │  │  └─ ...  // Same structure as myComponent folder
│  │  │  ├─ index.js // a file that export MyComponent
│  │  │  ├─ MyComponent.module.css // Optional: the CSS of the component (PascalCase)
│  │  │  ├─ MyComponent.js // The component itself (PascalCase)
│  │  │  └─ MyComponent.test.js  // Unit tests of the component (PascalCase)
│  │
│  ├─ css
│  │  └─ app.css // see nextjs documentation
│  │
│  ├─ layout // folder containing all layouts
│  │  ├─ siteLayout // a folder is created for each standalone component (camelCase)
│  │  │  ├─ Header // Each slave component has its own folder
│  │  │  │  └─ ...  // Same structure as SiteLayout folder
│  │  │  ├─ index.js // a file that export SiteLayout
│  │  │  ├─ SiteLayout.module.css // Optional: the CSS of the component (PascalCase)
│  │  │  ├─ SiteLayout.js // The component itself (PascalCase)
│  │  │  └─ SiteLayout.test.js  // Unit tests of the component (PascalCase)
│  │
│  ├─ pages // folder containing all pages. Pages are the entry points (see nextjs doc)
│  │  ├─ [lang]] // a folder is created for each top route
│  │  │  ├─ users // a folder is created for each top route
│  │  │  │  ├─ [id] // Dynamic route, see nextjs documentation
│  │  │  │  │  ├─ edit.js //edit user page /users/:id/edit
│  │  │  │  │  └─ index.js //view user page /users/:id
│  │  │  │  ├─ index.js // list all users page /users
│  │  │  │  └─ new.js // new user page /users/new
│  │  ├─ _app.js // the wrapper component common to all pages that bootstraps the App (<NextApp />)
│  │  └─ index.js // the index page /. Redirect to the correct locale
│  │
│  ├─ utils // a folder to contain any utility code. You are free to create your own structure
│  │  ├─ string.js
│  │  └─ ...
│  │
│  └─ settings.js // a central file to configure your app
│
├─ .env.development // contain variables specific to the DEV environement
├─ .env.development.local // contains sensitive data (not commited on GIT)
├─ .gitignore
├─ next.config.js // not mandatory. Specific configuration for nextjs
├─ package.json
├─ postcss.config.js // not mandatory. Only present if postcss is used
├─ README.md
├─ yarn.lock

Create React App

My-App
├─ public // see create react app documentation
│  ├─ locales
│  │  └─ en
│  │  │  └─ translation.json // locales in english
│  │  └─ fr
│  │  │  └─ translation.json // locales in french
│  ├─ index.html // index.html generated by create-react-app
│  └─ ... // You are free to create your own structure 
│
├─ src
│  ├─ assets
│  │  ├─ img // folder containing common images included in the bundle
│  │  ├─ fonts // folder containing common fonts included in the bundle
│  │  └─ files // folder containing common files included in the bundle
│  │
│  ├─ components // folder containing all components but routes
│  │  ├─ myComponent // a folder is created for each standalone component (camelCase)
│  │  │  ├─ myComponentHeader // Each slave component has its own folder
│  │  │  │  └─ ...  // Same structure as myComponent folder
│  │  │  ├─ index.js // a file that export MyComponent
│  │  │  ├─ image1.png // a file needed only by MyComponent (camelCase)
│  │  │  ├─ MyComponent.css // Optional: the CSS of the component (PascalCase)
│  │  │  ├─ MyComponent.js // The component itself (PascalCase)
│  │  │  └─ MyComponent.test.js  // Unit tests of the component (PascalCase)
│  │
│  ├─ routes // folder containing all routes
│  │  ├─ users // a folder is created for each top route
│  │  │  ├─ create // Each sub route has its own folder
│  │  │  │  └─ ...  // Same structure as myComponent folder
│  │  │  ├─ display
│  │  │  │  └─ ...
│  │  │  ├─ edit
│  │  │  │  └─ ... 
│  │  │  ├─ list
│  │  │  │  └─ ... 
│  │  │  ├─ index.js // a file that export Users
│  │  │  ├─ Users.js // The component itself
│  │  │  └─ Users.test.js  // Unit tests of the component
│  │
│  ├─ utils // a folder to contain any code. You are free to create your own structure
│  │  ├─ string.js
│  │  └─ ...
│  │
│  ├─ i18n.js // Bootstrap of the i18n library
│  ├─ index.js // The bootstrap of the app (entry point)
│  ├─ serviceWorker.js // generated by create react app
│  ├─ settings.js // a central file to configure your app
│  └─ setupTests.js  // generated by create react app
│
├─ .gitignore
├─ package.json
├─ README.md
├─ yarn.lock