Is this Next.JS folder structure recommended?

next js pages subfolder
next js pages directory
next js public folder
nest js directory structure
next js layout
next js css public folder
next js src folder
next js form example

We have resorted to this following project structure

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

To clarify, nothing has broken and it works amazingly well. We have components that are reused in multiple pages inside the components directory, where we import as follows

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

Also, components that are used only once reside side-by-side in it's pages folder.

The only problem we face now is the Hot Module reloading is broken, i.e. whenever we edit the .jsx file inside either the pages or the components directory, we have to manually reload the page to see effected changes (It doesn't affect the CSS files). It is something that we've grown accustomed to and so doesn't affect us seriously.

My question is, is there any impending catastrophe that we do not know of?

Stumbled upon this post while searching for a suitable folder structure for NextJS myself. I've been using a similar structure but recently found that this is not how you're suppose to use NextJS.

I don't know too much about the details, but NextJS has optimizations at the page level. When you build a NextJS project, you will see the pages logged as part of the build. NextJS treats every component file under the pages folder as a page, so by placing non-page components in the pages folder, you are drastically increasing build time because now NextJS goes and builds every one of those components as a page.

An opinionated basic Next.JS files and directories structure, The “public/” directory is another folder that Next.JS looks into for static files to be emitted into the final build directory. Other than these files and� This is the file structure I found useful when working with Next.js and that it helped using the framework. It doesn't mean it's the best one and it could probably be improved or changed in a per project basis. Remember the best file structure is to move files around until it feels right. Do you use something like this?

To all who are still interested in this, I personally recommend this approach due to the fact that it helps compartmentalize resources and allows for quickly finding things and unit testing.

It was inspired by an article by HackerNoon on How to structure your React app

Advanced Features: `src` Directory, src/pages will be ignored if pages is present in the root directory; Config files like next.config.js and tsconfig.json should be inside the root directory, moving them� The default Nuxt.js application structure is intended to provide a great starting point for both small and large applications. Of course, you are free to organize your application however you like. Watch a free lesson about the Nuxt.js directory structure on Vue School

If someone is still interested, I save the file depending on its type in my project, for example:

|-Nextjs-root
  |-Components
    |-Header.js
    |-Footer.js
    |-MoreExamples.js
  |-styles
   |-globar.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

Next.js File Structure, Sergio happy. React doesn't have a strong opinions on how to structure your files . Similarly Next.js has a few opinions, create a pages and static directory and that's Remember the best file structure is to move files around until it feels right. Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory it's automatically available as a route. The files inside the pages directory can be used to define most common patterns. Index routes. The router will automatically route files named index to the root of the directory. pages/index

React/Next.js File structure, How I structure directories, folders, and files of my React/Next.js projects. rigid file structure, one of my first search queries was for “best React� This is the recommended way to start a Next.js application, as it gives you structure and sample code to play with. from the Next.js project root folder run.

Node/Nextjs project to learn files and folders structure and maybe , Node/Nextjs project to learn files and folders structure and maybe some best practice. Hello, I am wondering if is there any "bigger" project on github or� Recommended Folder Structure for projects i'm learning react and want to know if there is any rules or better way to manage my component tree because currently i found that my projects are getting bigger and difficult to manage.

Next.js Practical Introduction Pt. 1: Pages and Layout, Learn how to use Next.js to create server-side rendered React web applications in this series. Familiarity with the React library is recommended. Anywhere in your system, create a folder named whatabyte and make it your but it makes sense to stick with well-understood file structure names that make� In this tutorial, we learn how best to organize the folder structure of an Angular Application. Finding the right folder structure for your real-life Angular application is very important. As you add more and more features to your App locating a certain component or file becomes messy if you do not have the proper structure in place.

Comments
  • Well definitely css is not general in next project. they use JS based css. something like styled components
  • @CodeManiac I agree, but it's more of a preference that a solution. We alternate between styled-jsx (styled components), sass and css
  • I agree... and believe me, I found out the hard way. I'm yet to make an edit on this post but yours will be appreciated
  • Yeah... I found out the hard way as well, was wondering why a build took minutes :o
  • I agree with this. I also learnt the hard way. Now I consider pages as routing and put only stuff that needs to be rendered on the server and import everything dynamically from components folder. Makes it easy to switch to non nextjs projects as well
  • Half a year later are you still using this structure? Anything you've learned along the way? Thanks for this
  • Sorry for the delay in response. Yes, I got to learn a lot. For starters, Next treats everything inside the pages as a directory, so it basically treats all the files as individual pages. This may not necessarily be a security breach in all cases, but better safe than sorry.
  • This is what I'm worried about, your MainComponent.jsx file and OtherComponents.jsx file is in a folder under pages, then wouldn't it display the page, if you typed it in your url?
  • it will. Take for example the page name is about. If you visit /about, /about/index, they will both work. The only downside to this is that if you type /about/OtherComponent, it will work and try to render the other component