Appearance

Project Structure ​

When starting a new project with Nuxt.js or Next.js, organizing your files and directories effectively is crucial for maintaining a clean and scalable codebase. Below is a recommended project structure for both frameworks:

Nuxt.js Project Structure ​

src/                  # This is the main source directory containing all the application-specific code. All subsequent folders will reside in this directory. 
|-- assets/           # Static assets like images, fonts, and styles
|-- components/       # Reusable Vue components
    |-- common/       # Reusable components across the app (e.g., buttons, modals).
    |-- layout/       # Components that makeup layouts (e.g., headers, footers).
    |-- UI/           # Page-specific components (e.g A login modal component)
|-- layouts/          # Application layouts
|-- middleware/       # Custom middleware functions
|-- pages/            # Application pages and routes
|-- plugins/          # Vue plugins
|-- static/           # Static files (will be served at root)
|-- services/         # For services like API calls, authentication handlers
|-- models/           # Defines the data structures or types that represent entities in your application
|-- stores/           # For state management (e.g., Pinia, Vuex store)
|-- utils/            # Utility/helper functions e.g., date formatters
|-- constants/        # Application-wide constants
|-- nuxt.config.js    # Nuxt.js configuration file
-- package.json       # Project dependencies and scripts

Next.js Project Structure ​

src/                  # This is the main source directory containing all the application-specific code. All subsequent folders will reside in this directory. 
|-- assets/           # Static assets like images, fonts, and styles
|-- components/       # Reusable components
    |-- common/       # Reusable components across the app (e.g., buttons, modals).
    |-- layout/       # Components that makeup layouts (e.g., headers, footers).
    |-- UI/           # Page-specific components (e.g A login modal component)
|-- app/              # Application pages and routes
|-- services/         # For services like API calls, authentication handlers
|-- models/           # Defines the data structures or types that represent entities in your application
|-- providers/        # provider components for managing global state
|-- stores/           # For state management (e.g. Zustand)
|-- hooks/            # Contains custom hooks which help in reusing stateful logic between components.
|-- utils/            # Utility/helper functions e.g., date formatters
|-- constants/        # Application-wide constants
|-- next.config.js    # Next.js configuration file
-- package.json       # Project dependencies and scripts

Was this page helpful?

Happy React is loading...