NextJS React Query Application Folder Structure

Welcome to the folder structure for your NextJS React Query application! Feel free to customize and adapt this structure to fit the unique needs of your project. Remember, there is no one-size-fits-all solution when it comes to organizing your project folders.

In /src folder you can find example for simple News website project.

---

Folder Structure Overview

src/api

• common
  • types.ts - generic types based on you API. Example: PaginatedResponse<T>.
• [domain-name] example - news
  • types.ts - types only for this domain
  • fetchers.ts - pure JS fetchers for this [domain-name] entities
  • queries.ts - react query hooks for this [domain-name] entities

src/app or src/pages

Define your application routes. Keep components free of logic and focus on loading data and rendering components from /components/[page-name]/[PageName].tsx.

src/components

• common - Includes shared components like Header and Footer.
  • header (example of common components)
    • Header.tsx
• [page-name]
  • components - Specific components for [PageName].tsx.
    • component-a
      • components - Specific components for ComponentA.tsx.
      • ComponentA.tsx - Utilizes components from ./components or src/components/common.
      • constants.ts
      • types.ts
      • helpers.ts
  • [PageName].tsx - Utilizes components from ./components or src/components/common.
  • constants.ts - component specific constants
  • types.ts - component specific types
  • helpers.ts - component specific helpers

src/constants

Centralize app constants, such as variables.ts and pages.ts.

src/helpers

Project-specific helpers go here.

src/hooks

Define custom hooks, e.g., useClickOutside or useDebounce, for across-the-board use.

src/providers

Design providers for the application within this folder.

src/styles

• global.css - Includes configurations for Tailwind CSS.

src/utils

Reusable utilities like date helpers or object utilities belong in this folder. Keep utils free of business logic.

---

Feel free to explore and adapt this structure to align with the needs of your NextJS React Query application. Enjoy coding and happy building! 🚀🌟