이게 다음인가요?JS 폴더 구조를 권장합니다.

이게 다음인가요?JS 폴더 구조를 권장합니다.

우리는 다음과 같은 프로젝트 구조에 의지하고 있습니다.

|- pages
    |- <page_name>
        |- index.js             # To do a default export of the main component
        |- MainComponent.jsx    # Contains other subcomponents
        |- main-component.css   # CSS for the main component
        |- OtherComponents.jsx  # more than 1 file for child components that are used only in that page
        |- __tests__            # Jest unit and snapshot tests
|- components
    |- index.js                 # Exports all the default components of each component as named exports
    |- CommonCmpnt1
        |- CommonCmpnt1.jsx
        |- common-cmpnt-1.css
        |- index.js             # To default export the component
        |- __tests__
    |- CommonCmpnt2
        |- CommonCmpnt2.jsx
        |- common-cmpnt-2.css
        |- index.js             # To default export the component
        |- __tests__

확실히 말하면, 고장난 것은 없고, 놀라울 정도로 잘 작동합니다..componentsImport를 다음과 같이 .

// Assuming we are inside MainComponent.jsx
// ...
import { CommonCmpnt1 } from '../../components';    // We even take it a step further and use absolute imports

한 ,, 회, 회, 회, 회, 포, 포, 포, 포, 포, 포, 포, also, also, also, also, also, also, also, also, also, it, it, it, it, it, it, it, it, it, it, it, it, , it, pages더입니니다다

현재 직면하고 있는 유일한 문제는 핫 모듈 새로고침이 고장났다는 것입니다. 즉,.jsxpages ★★★components영향을 받는 변경을 확인하려면 수동으로 페이지를 새로고침해야 합니다(CSS 파일에는 영향을 주지 않습니다).그것은 우리가 익숙해진 것이기 때문에 우리에게 심각한 영향을 주지 않는다.

제 질문은, 우리가 알지 못하는 임박한 재앙이 있는가 하는 것입니다.

NextJS에 적합한 폴더 구조를 직접 찾다가 우연히 이 게시물을 발견했습니다.비슷한 구조를 사용해 왔지만, 최근 NextJs를 사용하면 안 된다는 것을 알게 되었습니다.

자세한 것은 잘 모르지만, Next JS는 페이지 레벨의 최적화를 실시하고 있습니다.NextJS 프로젝트를 빌드하면 빌드의 일부로 기록된 페이지가 표시됩니다.NextJS는 아래의 모든 컴포넌트 파일을 처리합니다.pages를 「」에 「」를 참조해 주세요.pages이제 NextJS가 모든 컴포넌트를 페이지로 빌드하기 때문에 폴더 빌드 시간이 대폭 증가합니다.

나는 이 기사에 제시된 구조가 마음에 든다.

https://medium.com/@http.delvalle.cr/an-opinionated-basic-next-js-files-and-directories-structure-88fefa2aa759

/root
  \_ /.next/
  \_ /components/
      \_ Button/
          \_ button.spec.jsx
          \_ button.styles.jsx
          \_ index.jsx
  \_ /constants/
      \_ theme.js
      \_ page.js
  \_ /contexts/
      \_ Locale/
         \_ index.js
      \_ Page/
         \_ index.js
  \_ /pages/
      \_ _app.jsx
      \_ _document.jsx
      \_ about.jsx
      \_ index.jsx
  \_ /providers/
      \_ Locale/
         \_ index.js
      \_ Page/
         \_ index.js
  \_ /public/
      \_ favicon.ico
      \_ header.png
  \_ /redux/
      \_ actions/
         \_ users/
            \_ index.js
         \_ products/
            \_ index.js
      \_ reducers/
         \_ users/
            \_ index.js
         \_ products/
            \_ index.js
      \_ store/
         \_ index.js
      \_ types/
         \_ index.js
  \_ /shared/
      \_ jsons/
          \_ users.json
      \_ libs/
          \_ locale.js
      \_ styles/
          \_ global.css
  \_ /widgets/
      \_ PageHeader/
          \_ index.jsx
  \
  \_ .eslintignore
  \_ .eslintrc
  \_ .env
  \_ babel.config.js
  \_ Dockerfile
  \_ jest.config.js
  \_ next.config.js
  \_ package.json
  \_ README.md

그래도 관심 있는 사람이 있으면 프로젝트 유형에 따라 파일을 저장합니다. 예를 들어 다음과 같습니다.

|-Nextjs-root
  |-Components
    |-Header.js
    |-Footer.js
    |-MoreExamples.js
  |-styles
   |-globals.css
   |-header.module.css
   |-footer.module.css
  |-Services
    |-api              #Axios config to connect to my api
  |-Context
   |-AuthContext.js    #Global context to my app for auth purposes
  |-pages
   |-index.js

모듈러형 설계 패턴을 사용하는 권장 사항은 다음과 같습니다.

/public
    favicon.ico
/src
    /common
        /components
            /elements
                /[Name]
                    [Name].tsx
                    [Name].test.ts
        /hooks
        /types
        /utils
    /modules
        /auth
            /api
                AuthAPI.js
                AuthAPI.test.js
            /components
                AuthForm.tsx
                AuthForm.test.ts
            auth.js
    /pages
        /api
          /authAPI
              authAPI.js
          /[Name]API
              [Name]API.js
        _app.tsx
        _document.tsx
        index.tsx

https://dev.to/vadorequest/a-2021-guide-about-structuring-your-next-js-project-in-a-flexible-and-efficient-way-472 라는 기사를 썼습니다.

실제 페이지나 API 엔드포인트(테스트, 컴포넌트 등)가 아닌 페이지는 무시하지 않도록 주의해 주십시오.Next는 이러한 페이지를 실제 페이지로 번들하여 전개합니다.

이 방법에 관심이 있는 모든 사람에게 개인적으로 이 방법을 추천하는 이유는 자원을 구분하는 데 도움이 되고 빠르게 물건을 찾고 유닛 테스트를 수행할 수 있기 때문입니다.

HackerNoon의 "How to structure your React 앱" 기사에서 영감을 받았습니다.

당신의 거드름을 정의하는 올바른 방법은 없습니다.나는 이렇게 정의했다.

• src
  • 구성 요소들
    • layout.components --- 컴포넌트 폴더 내의 컴포넌트. 여러 페이지가 이 컴포넌트를 사용합니다.
    • -- -- - 특정--- 。
      • -------------------------------------
        • article.js -- 아티클 컴포넌트
    • ui --- 스타일 컴포넌트(예: 버튼, 제목, 링크)
  • 페이지
  • 스타일
• 일반의

페이지 디렉토리는 라우팅 목적으로만 사용합니다.

이렇게 하면 디렉토리 구조를 클린하게 유지하고 구성 요소를 상위 구성 요소 근처에 유지할 수 있습니다.

src
├── shared-components
│   └── ...
├── pages-components
│   ├── page-1
│   │   ├── index.tsx
│   │   ├── FooComponent.tsx  // page-1 specefic component
│   │   └── ...
│   └── home-page
│       └── index.tsx
└── pages                     // just for routing
    ├── page-1               
    │   └── index.ts          // export default from 'src/page-components/page-1'
    └── index.ts              // export default from 'src/page-components/home-page'

백엔드 전용 파일을 프런트 엔드 + 백엔드 파일과 분리해야 합니다.

어떤 이름을 붙이든 매우 명확한 의미를 가진 두 개의 디렉토리를 사용하는 것이 좋습니다.

• directory: 또는 백엔드만의할 수 전용: "DB" "백엔드 전용" "백엔드 전용" "백엔드 전용" "백엔드 전용" "백엔드 전용" "백엔드" "백엔드 전용" "백엔드" "백엔드 전용" "백엔드" 등).require('fs'))
• 프런트 엔드 + 백엔드 디렉토리:프런트 엔드 세이프만.Next.js는 SSR 설정이기 때문에 프런트엔드 세이프가 필요한 것은 모두 백엔드 세이프여야 합니다.따라서 공유 설정이나 도우미 등 백엔드에서도 사용할 수 있습니다.

그렇지 않으면 다음과 같은 오류가 발생하기 때문에 이는 중요합니다.

모듈을 찾을 수 없습니다.'fs'를 확인할 수 없습니다.

HoC를 고려했을 때 모듈에서 언급한 내용을 찾을 수 없습니다. Next.js 어플리케이션에서 'fs'를 해결할 수 없습니다.이러한 분할을 명확하게 하는 것 외에는 이 문제를 해결하는 방법을 모르겠습니다.

.lib/ »components/일반적으로 사용되는 관습이지만, 나는 명확한 인용구를 찾을 수 없었다.

더 back/ ★★★★★★★★★★★★★★★★★」front/

ESLintpages/,components/ , , , , 입니다.lib/

은 ' 내 효과'의 유일한 한 업스트림 내 코드 입니다.components/ ★★★★★★★★★★★★★★★★★」lib/https://nextjs.org/docs/basic-features/eslint#linting-custom-directories-and-files 에서 확인할 수 있습니다.pages/물론 마법이고 URL 엔트리 포인트가 포함되어 있습니다.을 이용하다

기본적으로는 Next.js는 페이지/, 컴포넌트/ 및 lib/ 디렉토리의 모든 파일에 대해 ESLint를 실행합니다.

디렉토리 리스트는, 거기에 기재되어 있는 대로 간단하게 설정할 수 있기 때문에, 이 경우는 큰 문제가 되지 않습니다.

지금 나에게 가장 적합한 방법은,pages각 파일의 컴포넌트는, 「실제」페이지 컴포넌트의 래퍼에 지나지 않습니다.src폴더입니다.이 방법을 사용하면 홈페이지를 보다 쉽게 구성할 수 있고, 레이아웃과 하위 구성요소를 동일한 폴더에 저장할 수 있다는 직관적인 느낌을 받을 수 있습니다.

폴더를 구조화할 수 있는 확실한 방법은 없을 수 있습니다.또, 이 모든 것은, 무엇이 당신을 용이하게 하는가에 달려 있습니다.

저는 보통 이렇게 어플리케이션을 구성합니다.

pages/
├─ assets/
│   ├─ images/
│   ├─ icons/
│   └─ misc/
├─ components/
│   ├─ Buttons/
│   ├─ Cards/
│   └─ ...
├─ config/
│   └─ config.ts         //configuration constants such as ip,keys etc
├─ constants/
├─ contexts/             // all your context files
├─ helpers/              // any extra functions
├─ hooks/                // for intricate react hooks
├─ interfaces/           // for typescript interfaces
├─ layouts/              // for all layout files
├─ modules/              // if you develop each module seperately
├─ pages/          
├─ services/             // for all your api calls
├─ styles/

저는 그 페이지 폴더 아래에 그 페이지와 관련된 컴포넌트를 넣는 것을 선호합니다.그리고 그components폴더는 공유 컴포넌트 전용입니다.

할 수 요.pageExtensions속성을 지정합니다.

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}

설정(에서는, 「(는)」, 「은(는) 파일」만이 사용됩니다..page.jsx이치노

pages/
├─ about/
│   ├─ index.page.jsx
│   └─ components/
│       ├─ MainComponent/
│       │   └─ index.jsx
│       └─ FooComponent/
│           └─ index.jsx
│
├─ _app.page.jsx
├─ _document.page.jsx
└─ index.page.jsx

참조: next.config.js: 커스텀 페이지 확장 | Next.js

언급URL : https://stackoverflow.com/questions/53854104/is-this-next-js-folder-structure-recommended