Maison >interface Web >js tutoriel >Combien de types de structures de projet front-end existe-t-il ?
Structurer un projet Frontend est très important pour développer une application efficace et facile à maintenir. Une bonne structure rend le code facile à comprendre. et peut étendre efficacement les fonctionnalités Surtout lors de l'utilisation Next.js et TypeScript en développement Voici quelques structures de projet couramment utilisées :
my-next-app/ ├── public/ # Static files like images, fonts, etc. ├── src/ # Source code │ ├── components/ # Reusable components │ ├── pages/ # Page components (Next.js routing) │ ├── styles/ # CSS/SASS files │ ├── hooks/ # Custom hooks │ ├── contexts/ # Context API providers │ ├── utils/ # Utility functions │ ├── types/ # TypeScript types/interfaces │ ├── services/ # API calls or services │ ├── lib/ # Any additional libraries or helpers │ └── config/ # Configuration files ├── .gitignore # Git ignore file ├── next.config.js # Next.js configuration ├── package.json # npm/yarn package file └── tsconfig.json # TypeScript configuration
Atomic Design est un concept de conception d'interface utilisateur qui met l'accent sur la séparation des composants en fonction de la taille et de la fonctionnalité. Peut être divisé en 5 niveaux : atomes, molécules, organismes, modèles et pages
my-next-app/ ├── public/ # Static files ├── src/ │ ├── components/ # UI components │ │ ├── atoms/ # Smallest elements like buttons, inputs │ │ ├── molecules/ # Combinations of atoms (e.g., form groups) │ │ ├── organisms/ # Complex UI components (e.g., header, footer) │ │ ├── templates/ # Page templates with placeholders │ │ └── pages/ # Page components │ ├── pages/ # Next.js routing (can be left for dynamic routing) │ ├── hooks/ # Custom hooks │ ├── contexts/ # Context providers │ ├── utils/ # Utility functions │ ├── types/ # TypeScript interfaces/types │ ├── services/ # API services │ ├── lib/ # Additional libraries/helpers │ └── config/ # Configurations ├── .gitignore ├── next.config.js ├── package.json └── tsconfig.json
La structure basée sur les fonctionnalités est un autre moyen de faciliter la gestion et le développement de nouvelles fonctionnalités. C'est facile
my-next-app/ ├── public/ # Static files ├── src/ │ ├── features/ # Separate by features/modules │ │ ├── featureA/ │ │ │ ├── components/ # Components specific to FeatureA │ │ │ ├── pages/ # Pages related to FeatureA │ │ │ ├── hooks/ # Hooks specific to FeatureA │ │ │ ├── services/ # API calls related to FeatureA │ │ │ └── utils/ # Utility functions for FeatureA │ │ └── featureB/ # Another feature module │ ├── shared/ # Shared resources across features │ │ ├── components/ # Shared components │ │ ├── hooks/ # Shared hooks │ │ ├── contexts/ # Shared contexts │ │ └── utils/ # Shared utilities │ ├── styles/ # Global styles │ └── config/ # Configuration files ├── .gitignore ├── next.config.js ├── package.json └── tsconfig.json
Cette structure est une gestion de projet avec plusieurs projets ou modules en un seul endroit. Convient aux grandes équipes ou aux projets qui nécessitent une séparation claire de chaque partie du développement
my-next-monorepo/ ├── apps/ # Applications (Next.js, React, etc.) │ ├── web/ # Next.js app │ └── admin/ # Another Next.js app or admin panel ├── packages/ # Shared packages or libraries │ ├── ui/ # UI component library │ ├── utils/ # Utility functions │ ├── hooks/ # Custom hooks │ └── services/ # API service packages ├── .gitignore ├── nx.json # NX configuration (if using NX) ├── turbo.json # Turborepo configuration (if using Turborepo) ├── package.json └── tsconfig.json
La conception de l'architecture en couches facilite la séparation des fonctions du projet
my-next-app/ ├── public/ # Static files ├── src/ │ ├── presentation/ # UI components, pages, and routing │ │ ├── components/ # UI components │ │ ├── pages/ # Next.js pages │ │ └── routes/ # Custom routing logic │ ├── domain/ # Business logic and entities │ │ ├── entities/ # Domain entities │ │ ├── useCases/ # Business use cases │ │ └── repositories/ # Interfaces for data repositories │ ├── infrastructure/ # Data access and external services │ │ ├── api/ # API service implementations │ │ ├── db/ # Database access │ │ └── thirdParty/ # Third-party integrations │ ├── shared/ # Shared utilities and configurations │ │ ├── utils/ # Utility functions │ │ └── config/ # Configuration files │ └── styles/ # Global styles ├── .gitignore ├── next.config.js ├── package.json └── tsconfig.json
L'utilisation de Storybook est un test et un développement systématiques de composants d'interface utilisateur séparés. Facilite le test des fonctionnalités des composants
my-next-app/ ├── public/ # Static files ├── src/ │ ├── components/ # UI components │ │ ├── Button/ # Button component │ │ │ ├── Button.tsx │ │ │ ├── Button.stories.tsx │ │ │ └── Button.test.tsx │ │ └── Input/ # Input component │ ├── pages/ # Next.js pages │ ├── hooks/ # Custom hooks │ ├── utils/ # Utility functions │ ├── styles/ # Global styles │ └── config/ # Configuration files ├── .storybook/ # Storybook configuration │ ├── main.js │ └── preview.js ├── .gitignore ├── next.config.js ├── package.json └── tsconfig.json
Le choix d'une structure de projet dépend de nombreux facteurs, tels que
le projet.
J'espère que ces informations vous aideront à choisir la bonne structure de projet pour votre développement Frontend !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!