File Structure

File Structure – React

create-react-app

• Group by features

  • each folder will have its own index.js, styles.css etc.

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

• Group by file type

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

Next.js

components/
  Folder1/
  Folder2/
  Folder3/
  Button.js
config/
  routes.js
lib/
  utils.js
pages/
  about/
  blog/
  projects/
  index.js
static/
  styles/
    global.js (optional)
  img/