This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
Next.js is great to give our React apps a big set of built-in features that are essential in Web applications.
It gives us just a little bit of structure for our project files.
All visible pages stay under the /pages folder.
API routes stay under the /pages/api folder.
Publicly visible files under /public.
That’s basically all. The rest is all on us.
What I commonly do is this.
All the React components required by pages are in a /components folder.
I usually have a /components/Common folder, and then I re-create the pages structure:
/components/Common/components/Home/components/Profile
… and so on.
Then I have a lib folder that contains all the utilities used by the React components or the API routes. It might be data fetching, a library initialization, the Prisma setup, database access, a fetcher for SWR, the easy-peasy store.. basically anything that could be reused anywhere but it’s not a component.
I also make sure that I can include them like this:
import comp from components/Common/comp
import x from lib/x
using this little setup in jsconfig.json:
{
"compilerOptions": {
"baseUrl": "."
}
}I mentioned Prisma, which I use frequently. That’d need its own /prisma folder for the schema and the migrations, and maybe an SQLite database if needed.
If the site has content, in form of markdown for example, I’ll add a /content folder.
For middleware (sometimes it’s useful), /middleware but it’s quite rare.
This will work fine for almost all the things you’ll need.
#ready
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-08-12T05:00:00+00:00) How I set up a Next.js project structure. Retrieved from https://www.scien.cx/2021/08/12/how-i-set-up-a-next-js-project-structure/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.