{"slug": "how-i-structured-my-next-js-14-app-router-project-and-why-it-scales", "title": "How I Structured My Next.js 14 App Router Project — And Why It Scales", "summary": "A developer building Softchic, a template marketplace, shared the project structure used for a Next.js 14 App Router application that scales. The structure includes route groups for organizing pages without affecting URLs, and separate folders for UI components, shared components, page sections, utilities, hooks, types, and site configuration. The approach enforces rules such as moving files used in more than two places to their own home and breaking up components longer than 150 lines.", "body_md": "Most Next.js tutorials show you how to start a project.\n\nNone of them show you how to *organize* one that won't fall apart at scale.\n\nHere's the exact structure I'm using for Softchic — a template\n\nmarketplace I'm currently building — and the reasoning behind every folder.\n\n```\nsrc/\n├── app/\n│   ├── (auth)/\n│   │   ├── login/\n│   │   │   └── page.tsx\n│   │   └── register/\n│   │       └── page.tsx\n│   ├── (main)/\n│   │   ├── browse/\n│   │   │   └── page.tsx\n│   │   └── templates/\n│   │       └── [slug]/\n│   │           └── page.tsx\n│   ├── layout.tsx\n│   ├── page.tsx\n│   └── globals.css\n├── components/\n│   ├── ui/\n│   ├── shared/\n│   │   ├── Navbar.tsx\n│   │   └── Footer.tsx\n│   └── sections/\n│       ├── Hero.tsx\n│       └── BrowseSection.tsx\n├── lib/\n│   └── utils.ts\n├── hooks/\n├── types/\n└── config/\n    └── site.ts\n```\n\n`app/`\n\nwith Route Groups\n\nRoute groups (folders wrapped in parentheses like `(auth)`\n\nand `(main)`\n\n)\n\nlet you organize pages without affecting the URL.\n\n`/app/(auth)/login/page.tsx`\n\nstill resolves to `/login`\n\nin the browser —\n\nthe `(auth)`\n\nfolder is invisible to the router.\n\nThis keeps related pages grouped without polluting your URLs.\n\n`components/ui/`\n\nThis is where shadcn/ui drops its components when you run:\n\n```\nnpx shadcn@latest add button\n```\n\nNever manually edit these — treat them as a local library.\n\n`components/shared/`\n\nGlobal components used across multiple pages — Navbar, Footer,\n\nmodals that appear everywhere. If it's reused on more than two pages,\n\nit lives here.\n\n`components/sections/`\n\nPage-specific sections like `Hero.tsx`\n\nor `BrowseSection.tsx`\n\n.\n\nThese are too large to live inside a page file but too specific\n\nto be \"shared.\" This folder keeps your `page.tsx`\n\nfiles clean.\n\n`lib/utils.ts`\n\nUtility functions — shadcn auto-generates a `cn()`\n\nhelper here for\n\nmerging Tailwind classes. Add your own helpers here too.\n\n`hooks/`\n\nCustom React hooks. As your app grows, logic like `useCart()`\n\n,\n\n`useCurrency()`\n\n, or `useAuth()`\n\nbelongs here — not inside components.\n\n`types/`\n\nAll your TypeScript interfaces and types in one place.\n\nWhen your `Template`\n\ntype is used in 6 different files,\n\nyou define it once here and import it everywhere.\n\n`config/site.ts`\n\nSite-wide constants — your app name, description, social links,\n\nbase URL. One file to update when things change.\n\n``` js\nexport const siteConfig = {\n  name: \"Softchic\",\n  description: \"Premium website templates for developers and businesses.\",\n  url: \"#\",\n  links: {\n    twitter: \"https://x.com/ifehdelight\",\n  },\n}\n```\n\nIf a file is used in more than two places — it gets its own home.\n\nIf a component is longer than 150 lines — it gets broken up.\n\nThat's it. Simple rules prevent messy codebases.\n\nThis is the foundation Softchic is being built on.\n\nNext post I'm breaking down how Tailwind CSS v4 changes\n\nthe way you write styles — and what actually surprised me.\n\n**The Softchic waitlist drops soon — follow me here on Dev.to\nso you don't miss it.**\n\n— Delight | Founder, Softchic\n\n[@ifehdelight](https://x.com/ifehdelight) on X", "url": "https://wpnews.pro/news/how-i-structured-my-next-js-14-app-router-project-and-why-it-scales", "canonical_source": "https://dev.to/ifehdelight/how-i-structured-my-nextjs-14-app-router-project-and-why-it-scales-4e09", "published_at": "2026-06-30 20:58:51+00:00", "updated_at": "2026-06-30 21:19:00.016848+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Next.js", "Softchic", "shadcn/ui", "Tailwind CSS", "Delight", "Dev.to"], "alternates": {"html": "https://wpnews.pro/news/how-i-structured-my-next-js-14-app-router-project-and-why-it-scales", "markdown": "https://wpnews.pro/news/how-i-structured-my-next-js-14-app-router-project-and-why-it-scales.md", "text": "https://wpnews.pro/news/how-i-structured-my-next-js-14-app-router-project-and-why-it-scales.txt", "jsonld": "https://wpnews.pro/news/how-i-structured-my-next-js-14-app-router-project-and-why-it-scales.jsonld"}}