Starting a new Next.js project the right way is key to building a clean, maintainable, and scalable application. This blog will guide you through:
1. Recommended Folder Structure
/app → App Router (Next.js 13+)
/components → Reusable UI components
/lib → Utilities (e.g., axios instance, helpers)
/hooks → Custom hooks (e.g., useAuth, useModal)
/store → Global state (e.g., Zustand, Redux)
/styles → Tailwind or global styles
/services → API logic and domain services
/constants → Static values like routes, config
/types → TypeScript interfaces and types
/assets → Static assets like images, icons
Alternatives:
| Approach | When to use |
|---|---|
| Flat structure | Small apps or MVPs |
Domain-driven (e.g., features/) |
Large-scale apps with modules |
Monorepo (apps/, packages/) |
For managing multiple apps/libraries using Turborepo or Nx |
2. Project Initialization
Recommended options:
-
✅ App Router (Next.js 13+)
-
✅ Tailwind CSS
-
✅ ESLint + Prettier
-
✅
src/directory
Add
--example with-shadcn-uiif you want preconfigured ShadCN setup.
3. Essential Libraries + Alternatives
| Category | Recommended | Alternatives |
|---|---|---|
| HTTP Client | axios |
fetch, ky, superagent |
| Data Fetching | @tanstack/react-query |
SWR, Redux Toolkit Query, Apollo Client (for GraphQL) |
| UI Kit | shadcn/ui |
Chakra UI, Radix UI, Headless UI, Material UI |
| Global State | zustand |
recoil, redux, jotai, valtio |
| Icons | lucide-react |
heroicons, react-icons, fontawesome |
| Classnames | clsx, tailwind-variants |
classnames, cva (shadcn built-in) |
| Date Utils | date-fns, dayjs |
luxon, moment (legacy) |
| Testing | Jest, Testing Library |
Vitest, Cypress (E2E), Playwright |
4. Data Fetching: fetch vs axios vs react-query
| Tool | Use Case | Pros | Cons |
|---|---|---|---|
fetch |
Simple HTTP calls | Native, zero dependency | No interceptors, verbose |
axios |
Complex HTTP logic | Interceptors, defaults | Slightly heavier |
react-query |
Async state/caching | Auto caching, retry, pagination | Requires setup & context |
SWR |
Lightweight data fetching | Simpler than React Query | Less control |
RTK Query |
If already using Redux | Auto-generated hooks | Requires Redux setup |
Best Practice:
Use React Query + Axios for complex apps.
5. Styling Libraries
| Tool | Use Case | Pros | Alternatives |
|---|---|---|---|
| Tailwind CSS | Utility-first design | Fast, customizable | Bootstrap, SCSS, CSS Modules |
| ShadCN/UI | Component toolkit with Tailwind | Beautiful UI, composable | Chakra UI, Material UI |
| Radix UI | Headless component primitives | Accessibility | Headless UI (by Tailwind) |
Tip: Use
clsxorcvafor dynamic class management.
6. State Management
| Library | Use When | Pros | Alternatives |
|---|---|---|---|
| Zustand | Simple, scalable state | Minimal boilerplate | Recoil, Jotai |
| Redux Toolkit | Complex state flows | Devtools, middleware | Zustand for simpler apps |
| React Context | Limited global state | Native, simple | Not scalable alone |
Use Zustand for auth, theme, modal toggles.
Use React Query for server state (fetched data).
🧪 7. Git + Dev Tools Setup
Git Practices
-
Use
.gitignorefromcreate-next-app -
Commit using
feat/,fix/,refactor/prefixes -
Keep a
README.mdwith setup instructions
📦 8. Optional Enhancements
| Feature | Tool |
|---|---|
| Monorepo | Turborepo, Nx |
| Storybook | For component preview |
| Auth | next-auth, Clerk, Auth0 |
| Forms | react-hook-form, Formik |
| File Upload | react-dropzone, uploadthing, cloudinary |
✅ Starter Checklist
-
Next.js + App Router + TypeScript
-
Tailwind CSS + ShadCN
-
React Query + Axios
-
Zustand for state (or Redux)
-
Organized folder structure
-
ESLint, Prettier, Husky
-
.env,README.md, GitHub repo
🏁 Final Thoughts
Choosing the right tools and folder structure at the beginning saves hours of refactoring later. Whether you’re building a portfolio, SaaS, or enterprise dashboard, these practices will help you and your team ship faster and scale better.
