Hemos recurrido a esta siguiente estructura de proyecto
|- 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__ Para aclarar, nada se ha roto y funciona increíblemente bien. Tenemos componentes que se reutilizan en varias páginas dentro del directorio de components , donde importamos de la siguiente manera
// Assuming we are inside MainComponent.jsx // ... import { CommonCmpnt1 } from '../../components'; // We even take it a step further and use absolute imports Además, los componentes que se usan solo una vez residen uno al lado del otro en su carpeta de pages .
El único problema al que nos enfrentamos ahora es que la recarga del Hot Module no funciona, es decir, cada vez que editamos el archivo .jsx dentro de las pages o del directorio de components , tenemos que recargar manualmente la página para ver los cambios realizados (no afecta el CSS). archivos). Es algo a lo que nos hemos acostumbrado y por lo tanto no nos afecta seriamente.
Mi pregunta es, ¿hay alguna catástrofe inminente que no sepamos?
Tropecé con esta publicación mientras buscaba una estructura de carpetas adecuada para NextJS. He estado usando una estructura similar, pero recientemente descubrí que no es así como se supone que debes usar NextJS.
No sé mucho sobre los detalles, pero NextJS tiene optimizaciones a nivel de página. Cuando crea un proyecto NextJS, verá las páginas registradas como parte de la construcción. NextJS trata cada archivo de componente en la carpeta de pages como una página, por lo que al colocar componentes que no son de página en la carpeta de pages , está aumentando drásticamente el tiempo de compilación porque ahora NextJS compila cada uno de esos componentes como una página.
Me gusta la estructura propuesta en este artículo.
/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.mdPara todos los que todavía están interesados en esto, personalmente recomiendo este enfoque debido a que ayuda a compartimentar los recursos y permite encontrar cosas rápidamente y realizar pruebas unitarias.
Se inspiró en un artículo de HackerNoon sobre cómo estructurar su aplicación React