Next.js project folder
Unanswered
North Pacific hake posted this in #help-forum
North Pacific hakeOP
As someone new to web development, I've been building a website with Next.js and TypeScript. After diving into the documentation for both technologies, I've found the process genuinely enjoyable — but one question has nagged at me from the start: what's the best way to organize my project's file structure?
This is the structure of a blank Next.js project bootstrapped with create-next-app:
However, looking at other open source projects and examples, I understand that a common convention is to keep the app directory purely for routing and store all application code in shared folders at the project root, like this:
For my project, I went with this arrangement — you can see the full folder listing attached. Looking back, I think I made a few mistakes. For instance, the ui subfolder inside components feels unnecessary, and I'm not sure hooks belong inside lib. I put them there thinking of them as reusable code, but I'm not so sure.
Can you help me fix this mess? Please
This is the structure of a blank Next.js project bootstrapped with create-next-app:
.
├── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── eslint.config.mjs
├── next.config.ts
├── next-env.d.ts
├── node_modules (very HUGE folder)
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── public
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
├── README.md
└── tsconfig.jsonHowever, looking at other open source projects and examples, I understand that a common convention is to keep the app directory purely for routing and store all application code in shared folders at the project root, like this:
.
├── app
├── components
├── lib
etc.For my project, I went with this arrangement — you can see the full folder listing attached. Looking back, I think I made a few mistakes. For instance, the ui subfolder inside components feels unnecessary, and I'm not sure hooks belong inside lib. I put them there thinking of them as reusable code, but I'm not so sure.
Can you help me fix this mess? Please
6 Replies
@North Pacific hake As someone new to web development, I've been building a website with Next.js and TypeScript. After diving into the documentation for both technologies, I've found the process genuinely enjoyable — but one question has nagged at me from the start: what's the best way to organize my project's file structure?
This is the structure of a blank Next.js project bootstrapped with create-next-app:
.
├── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── eslint.config.mjs
├── next.config.ts
├── next-env.d.ts
├── node_modules (very HUGE folder)
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── public
│ ├── file.svg
│ ├── globe.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
├── README.md
└── tsconfig.json
However, looking at other open source projects and examples, I understand that a common convention is to keep the app directory purely for routing and store all application code in shared folders at the project root, like this:
.
├── app
├── components
├── lib
etc.
For my project, I went with this arrangement — you can see the full folder listing attached. Looking back, I think I made a few mistakes. For instance, the ui subfolder inside components feels unnecessary, and I'm not sure hooks belong inside lib. I put them there thinking of them as reusable code, but I'm not so sure.
Can you help me fix this mess? Please
Northeast Congo Lion
Firstly as U mentioned feeling like the ui subfolder is unnecessary, but I highly recommend keeping it. In modern React development (heavily popularized by tools like shadcn/ui), the components/ui folder serves a very specific and helpful purpose: it houses your "dumb" or atomic components. These are generic, highly reusable building blocks like <Button />, <Input />, <Modal />, or <Card />. By keeping them in a ui folder, you separate them from your complex, feature-specific components (like a <UserDashboard /> or <NavigationMenu />), keeping your component library incredibly organized.
And last one, Hooks can't be belonged to Lib Bcz Typically Lib reserved to implement JS utility function and third-parties library config like Axios, .. unlike hooks it will directly injected to components or pages and not a Pure utility
Down below recommend for more cleaner folder structure
And last one, Hooks can't be belonged to Lib Bcz Typically Lib reserved to implement JS utility function and third-parties library config like Axios, .. unlike hooks it will directly injected to components or pages and not a Pure utility
Down below recommend for more cleaner folder structure
├── app/
│ ├── layout.tsx
│ └── page.tsx
├── components/ # All reusable React components
│ ├── ui/ # Atomic, generic components (Button, Input)
│ ├── layout/ # Global layout components (Header, Footer, Sidebar)
│ └── features/ # Complex, domain-specific components (AuthForm, ProductList)
├── hooks/ # Custom React hooks (useAuth, useClickOutside)
├── lib/ # Pure TS utilities, formatting helpers, and 3rd-party configs
│ └── utils.ts
├── types/ # Global TypeScript definitions and interfaces (.d.ts files)
├── public/@Northeast Congo Lion Firstly as U mentioned feeling like the ui subfolder is unnecessary, but I highly recommend keeping it. In modern React development (heavily popularized by tools like shadcn/ui), the components/ui folder serves a very specific and helpful purpose: it houses your "dumb" or atomic components. These are generic, highly reusable building blocks like <Button />, <Input />, <Modal />, or <Card />. By keeping them in a ui folder, you separate them from your complex, feature-specific components (like a <UserDashboard /> or <NavigationMenu />), keeping your component library incredibly organized.
And last one, Hooks can't be belonged to Lib Bcz Typically Lib reserved to implement JS utility function and third-parties library config like Axios, .. unlike hooks it will directly injected to components or pages and not a **Pure ** utility
Down below recommend for more cleaner folder structure
├── app/
│ ├── layout.tsx
│ └── page.tsx
├── components/ # All reusable React components
│ ├── ui/ # Atomic, generic components (Button, Input)
│ ├── layout/ # Global layout components (Header, Footer, Sidebar)
│ └── features/ # Complex, domain-specific components (AuthForm, ProductList)
├── hooks/ # Custom React hooks (useAuth, useClickOutside)
├── lib/ # Pure TS utilities, formatting helpers, and 3rd-party configs
│ └── utils.ts
├── types/ # Global TypeScript definitions and interfaces (.d.ts files)
├── public/
North Pacific hakeOP
Where do i put the icons? They're tsx files used by all components. Also, is it okay to make a utils folder inside the lib folder? There's just a lot of code and thus some issplit into multiple files.
@North Pacific hake Where do i put the icons? They're tsx files used by all components. Also, is it okay to make a utils folder inside the lib folder? There's just a lot of code and thus some issplit into multiple files.
Northeast Congo Lion
1. Since your icons are .tsx files (likely functional React components), they belong inside the components directory. However, because they are global and used everywhere, they shouldn't be buried inside a specific feature folder.
The Best Practice: Create a components/icons folder.
This keeps them categorized and easy to find. If you have dozens of icons, you can even create an index.ts file inside that folder to export them all, allowing for clean "named imports."
Usage like that
If svg U could also do like that, Nextjs already categorized all media to public folder so u no need mind it. (like image below)
2.Absolutely. In fact, it’s preferred once your logic starts to get heavy.
The lib (library) folder is often seen as the "brain" of your non-UI logic. If you have a lot of code, splitting it into a utils subfolder
Just code by own styles you like do not care about it too much
The Best Practice: Create a components/icons folder.
This keeps them categorized and easy to find. If you have dozens of icons, you can even create an index.ts file inside that folder to export them all, allowing for clean "named imports."
Usage like that
import { HomeIcon, UserIcon } from '@/components/icons';If svg U could also do like that, Nextjs already categorized all media to public folder so u no need mind it. (like image below)
2.Absolutely. In fact, it’s preferred once your logic starts to get heavy.
The lib (library) folder is often seen as the "brain" of your non-UI logic. If you have a lot of code, splitting it into a utils subfolder
├── lib/
│ ├── utils/
│ │ ├── dates.ts
│ │ └── formatting.ts
│ └── prisma.tsJust code by own styles you like do not care about it too much
North Pacific hakeOP
@Northeast Congo Lion I also have a "fonts" folder, with my .ttf s. Should I put it in the ui folder?
(sorry for the questions)
(sorry for the questions)
Northeast Congo Lion
@North Pacific hake for global use no complex requirement u could create folder asset/fonts to save font and import using like a module in rootlayout in nextjs font module
Or for quickly u could go to google font and import to rootcss, or html file
Documments:
https://nextjs.org/docs/app/getting-started/fonts
Or for quickly u could go to google font and import to rootcss, or html file
Documments:
https://nextjs.org/docs/app/getting-started/fonts
If u have annother question u could DM for me to suppoting