DEV Community

A 2021 guide about structuring your Next.js project in a flexible and efficient way

Vadorequest on January 21, 2021

Next.js Next.js is very unopinionated about how to structure your Next.js project. The only thing you must really be careful about is...
Collapse
 
swiftwinds profile image
SwiftWinds

Sorry if this is a silly question but why is elements nested in components? Are there supposed to be sibling folders to elements? If so, what?

Collapse
 
kimskogsmo profile image
Kim Skogsmo • Edited

With atomic design you organize your components in five different types; atoms, molecules, organisms, templates, pages. Maybe the OP is insinuating something similar with his 'elements' folder. For example, there could be an 'elements' and a 'views' folder in there, or something.

See: bradfrost.com/blog/post/atomic-web...

Collapse
 
oseisaac profile image
ISaac

I have the exact same question, not sure why you need that

Collapse
 
andrej_gajdos profile image
Andrej Gajdos

I am wondering the same thing

Collapse
 
alexman profile image
Alexander Hofstede

Thanks for taking the time to do a write up, we're all looking for good places to "put our stuff"!

From your folder structure however, I cannot deduce whether /modules/auth/api/AuthAPI.js would be something imported in /modules/auth/components/AuthForm.tsx (as a helper that exposes the API to the front-end components) or /pages/api/authAPI/authAPI.js (as a utility file that the page Javascript module defers to for actual authing) or somewhere else. In other words, is it front- or backend code?

The use of the term "module" is also tricky territory in a Javascript context, since it is often referred to when talking about a single file. (I had to call it "Javascript module" above for example! :)

Collapse
 
mtrogers profile image
mtrogers

Hi, thanks!

I'm a little confuddled about nextjs and its API implementation. I'm coming from experience with express routing, in which I would bind endpoints in a routes controller.
What sorts of functions go in your /pages/api/auth/authAPI? and which go in your /modules/auth/api/authAPI? and the /auth/auth.js?

Collapse
 
mtrogers profile image
mtrogers

This was awesome, thank you.

Do you have an example codebase using this structure, to see it a little more concrete?

I'm coming from express routing for apis, and so I'm a little confuddled by how I should organize things. If I have a folder structure like
/modules
/auth
/api
AuthAPI.js
/components
auth.js
/pages
/api
/authAPI
authAPI.js
What kind of functions go in /modules/auth/api/AuthAPI? /modules/auth/auth.js?
What kind of functions go in /pages/api/authAPI/authAPI.js?

Collapse
 
mtrogers profile image
mtrogers

Also, is [name]API.js your shorthand for all the other ones, or is that your "router" ?

Collapse
 
flowck profile image
Firmino Changani

I've adopted the same architecture because it allows me to separate use case artifacts from everything else.

Well done mate.

Collapse
 
raaghu profile image
Raghavendra

How about each module in its own NPM Package ?
youtube.com/watch?v=p3vIeN1_o1I has a demo to split NextJs Project into separate modules

Collapse
 
onkeltem profile image
Artiom Neganov

I'm gonna use this approach with in my current project.

Collapse
 
gutisalex profile image
gutisalex

Where do you put your queries when using graphql? src/common/queries or rather src/modules/auth/api/queries ?