Рекомендуется ли эта структура папок Next.JS? - PullRequest
Новая
       53

Рекомендуется ли эта структура папок Next.JS?

0 голосов
/ 19 декабря 2018

Мы прибегли к этой следующей структуре проекта 

|- 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__

Чтобы уточнить, ничего не сломалось, и это работает удивительно хорошо.У нас есть компоненты, которые повторно используются на нескольких страницах в каталоге components, куда мы импортируем следующим образом 

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

Кроме того, компоненты, которые используются только один раз, находятся рядом в его папке pages.

Единственная проблема, с которой мы сейчас сталкиваемся, это , перезагрузка Горячего модуля не работает, т.е. всякий раз, когда мы редактируем файл .jsx внутри каталога pages или components, мынеобходимо вручную перезагрузить страницу, чтобы увидеть внесенные изменения (это не влияет на файлы CSS).Это то, к чему мы привыкли, и поэтому оно не оказывает на нас серьезного влияния.

Мой вопрос: есть ли какая-то надвигающаяся катастрофа, о которой мы не знаем?

1 Ответ

0 голосов
/ 13 февраля 2019

Всем, кто все еще заинтересован в этом, я лично рекомендую этот подход, поскольку он помогает разделить ресурсы и позволяет быстро находить вещи и проводить модульное тестирование.

Он был вдохновлен статьей HackerNoonна Как структурировать приложение React

...