NextJs App-Router Folder Structure



						
						├── app/
						|	|-- (components)/
						|	|-- |-- (authentication-layout)/
						|	|-- |-- |-- authentication/
						|	|-- |-- |-- error-pages/
						|	|-- |-- |-- layout.tsx
						|	├── |-- (content-layout)/
						|	|   |-- |-- advance-ui/
						|	|   |-- |-- |-- acoordions-collapse/
						|	|   |-- |-- |-- |-- |-- page.tsx
						|	|   |-- |-- apps/
						|	|   |-- |-- charts/
						|	|   |-- |-- dashboard/
						|	|   |-- |-- forms/
						|	|   |-- |-- icons/
						|	|   |-- |-- maps/
						|	|   |-- |-- pages/
						|	|   |-- |-- tables/
						|	|   |-- |-- task/
						|	|   |-- |-- ui-elements/
						|	|   |-- |-- utilities/
						|	|   |-- |-- widgets/
						|	|   |-- |-- layout.tsx
						|	|-- |-- (landing-layout)/
						|	|   |-- |-- job-landing/
						|	|   |-- |-- landing/
						|	|   |-- |-- layout.tsx/
						|	|-- |-- layout.tsx
						|	|-- api/
						|	|-- favicon.ico
						|	|-- globals.scss
						|	|-- layout.tsx
						|	|-- not-found.tsx
						|	|-- page.tsx
						├── public/
						|	|-- assets/
						|	|-- next.svg
						|	|-- vercel.svg
						├── shared/
						|	|-- data/
						|	|-- firebase/
						|	|-- layout-components/
						|	|-- redux/
						├── eslintrc.json
						├── gitignore		
						├── next.config.js
						├── next.env.d
						├── package-lock.json
						├── package.json
						├── plugin.d
						├── README.md
						├── tsconfig

	
						
Folders Description
  • Ynex - NextJs Typescript Admin Dashboard Template / : Root template folder contain all tsx, scss, images and other files.
    • app/ : For server-side routing, you can use Next.js's API routes feature.
      • (components)/: A grouping folder for three layouts. The parentheses indicate a grouping, not a route itself.
        • (authentication-layout)/ : A grouping folder for authentication-related pages.
        • (content-layout)/ : A grouping folder for components.
        • (landingpage-layout)/ : A grouping folder for landing pages.
      • api/: Serverless API route to handle contact form submissions.
      • global.scss/ :Global scss file applied to all pages.
      • layout.scss/ : Defines a layout that wraps all pages. Useful for common components like headers or footers.
      • notfound.scss/ :app/not-found handles global unmatched URLs.
      • page.tsx/ : The root index page component for your application.
    • public/
      • assets/:Stores static assets like images, accessible via /public/assets
    • shared/ :Reusable components and Data files that can be used across multiple pages.
    • eslintrtc.json : ESLint configuration file.
    • gitignore : Specifies intentionally untracked files to ignore.
    • next-env.d.ts : Next.js environment declaration file.
    • next-config.js : Configuration file for customizing your Next.js setup.
    • package.json : Contains metadata about the project and its dependencies.
    • README.md : Project documentation and instructions.
    • tsconfig.json : TypeScript configuration file.
  • Creating Routes

    Pages:

    Each folder within the /app directory corresponds to a route. For example:

    • /app/(components)/(content-layout)/advanced-ui/accordions-collapse/page.tsx corresponds to the /accordions-collapse route.
    Nested Routes

    To create nested routes, simply nest folders. For example:

    • /app/(components)/(content-layout)/advanced-ui/accordions-collapse/page.tsx corresponds to the /accordions-collapse route under the content-layout grouping.
    Layouts:
    • layout.tsx in the /app directory defines a global layout.
    • You can create nested layouts by adding a layout.tsx file in subdirectories.
    Grouping:
    • Parentheses around a folder name indicate a grouping and do not affect the route structure but help in organizing related routes.