DEV Community

c_nooknook_daily_prompt
c_nooknook_daily_prompt

Posted on

1

How many types of frontend project structures are there?

การวางโครงสร้างโปรเจค Frontend เป็นสิ่งสำคัญมากสำหรับการพัฒนาแอปพลิเคชันที่มีประสิทธิภาพและง่ายต่อการดูแลรักษา การวางโครงสร้างที่ดีช่วยให้โค้ดเข้าใจง่าย และสามารถขยายฟีเจอร์ได้อย่างมีประสิทธิภาพ โดยเฉพาะเมื่อใช้ Next.js และ TypeScript ในการพัฒนา ในที่นี้จะแสดงโครงสร้างโปรเจคที่นิยมใช้กันหลายรูปแบบ:

1. Basic Structure

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
Enter fullscreen mode Exit fullscreen mode

2. Atomic Design Structure

Atomic Design คือแนวคิดในการออกแบบ UI ที่เน้นการแยกส่วนประกอบตามขนาดและการใช้งาน สามารถแบ่งออกเป็น 5 ระดับ ได้แก่ Atoms, Molecules, Organisms, Templates, และ 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
Enter fullscreen mode Exit fullscreen mode

3. Feature-Based Structure

โครงสร้างแบบแยกตามฟีเจอร์เป็นอีกหนึ่งแนวทางที่ทำให้การจัดการและขยายฟีเจอร์ใหม่ๆ เป็นเรื่องง่าย

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
Enter fullscreen mode Exit fullscreen mode

4. Monorepo Structure with NX or Turborepo

โครงสร้างนี้เป็นการจัดการโปรเจคที่มีหลายโปรเจคหรือโมดูลในที่เดียว เหมาะสำหรับทีมขนาดใหญ่หรือโปรเจคที่ต้องการการแยกการพัฒนาแต่ละส่วนอย่างชัดเจน

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
Enter fullscreen mode Exit fullscreen mode

5. Layered Architecture Structure

การออกแบบโครงสร้างแบบ Layered Architecture ช่วยให้การแยกส่วนตามการทำงานของโปรเจคเป็นเรื่องง่าย

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
Enter fullscreen mode Exit fullscreen mode

6. Component-Driven Structure with Storybook

การใช้ Storybook เป็นการทดสอบและพัฒนา UI Component ที่แยกออกมาอย่างเป็นระบบ ช่วยให้สามารถทดสอบการทำงานของ component ได้ง่าย

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
Enter fullscreen mode Exit fullscreen mode

Factors to Consider When Choosing a Structure

การเลือกโครงสร้างของโปรเจคขึ้นอยู่กับหลายปัจจัย เช่น

  1. ขนาดของโปรเจค: ถ้าโปรเจคมีขนาดใหญ่ ควรเลือกโครงสร้างที่ช่วยให้การจัดการและขยายโปรเจคได้ง่าย
  2. ขนาดของทีมพัฒนา: ถ้ามีทีมขนาดใหญ่ ควรเลือกโครงสร้างที่แยกแต่ละส่วนให้ชัดเจนเพื่อการทำงานร่วมกัน
  3. ความซับซ้อนของโปรเจค: ถ้าโปรเจคมีความซับซ้อน ควรเลือกโครงสร้างที่สามารถจัดการความซับซ้อนเหล่านั้นได้
  4. เทคโนโลยีที่ใช้: เทคโนโลยีที่ใช้เช่น Next.js, TypeScript, และ Storybook อาจมีโครงสร้างที่เหมาะสมและแนะนำ

Best Practices for Project Structure

  • Keep Components Small and Reusable: Components should do one thing and do it well. Reuse components across

the project.

  • Use Contexts Wisely: Leverage React Context API to manage state across components that need access to the same data.
  • Organize Styles: Organize your CSS/SASS files efficiently, using CSS modules or styled-components for modularity.
  • Utilize TypeScript for Type Safety: Define types and interfaces to ensure type safety and better code readability.
  • Write Tests: Include unit and integration tests for components and utilities to ensure functionality.

Tools to Consider

  • Storybook: สำหรับการพัฒนาและทดสอบ UI Component
  • Jest: สำหรับการทดสอบและตรวจสอบโค้ด
  • ESLint: สำหรับการตรวจสอบและจัดรูปแบบโค้ด
  • Prettier: สำหรับการจัดรูปแบบโค้ดอัตโนมัติ
  • Husky & Lint-Staged: สำหรับการตั้งค่า pre-commit hooks
  • Next.js Custom Server: สำหรับการใช้งาน server-side logic

หวังว่าข้อมูลนี้จะช่วยให้คุณสามารถเลือกโครงสร้างโปรเจคที่เหมาะสมกับการพัฒนา Frontend ของคุณได้!

Feature flag article image

Create a feature flag in your IDE in 5 minutes with LaunchDarkly’s MCP server ⏰

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post

Top comments (0)

Build the product, not the plumbing—JavaScript first

Build the product, not the plumbing—JavaScript first

Kinde handles the boring but critical stuff: auth, permissions, and billing—all from one Javascript SDK.

Get a free account

👋 Kindness is contagious

Explore this practical breakdown on DEV’s open platform, where developers from every background come together to push boundaries. No matter your experience, your viewpoint enriches the conversation.

Dropping a simple “thank you” or question in the comments goes a long way in supporting authors—your feedback helps ideas evolve.

At DEV, shared discovery drives progress and builds lasting bonds. If this post resonated, a quick nod of appreciation can make all the difference.

Okay