Spruha/
├── app/
| |-- (components)/
| |-- |-- (authenticationlayout)/
| |-- |-- |-- authentication/
| |-- |-- |-- pages/
| |-- |-- └── layout.tsx
| ├── |-- (contentlayout)/
| | |-- |-- advancedui/
| | |-- |-- |-- carousels/
| | |-- |-- └── |--page.tsx
| | |-- └── layout.tsx
| |-- |-- landing/
| | |-- |-- (landinglayout)/
| |-- └──- layout.tsx
| |-- favicon.ico
| |-- globals.scss
| |-- layout.tsx
| |-- not-found.tsx
| |-- page.tsx
├── public/
| |-- assets/
| |-- next.svg
| | vercel.svg
├── shared/
| |-- data/
| |-- firebase/
| |-- layout-components/
| |-- redux/
| └── contextapi.tsx
├── eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.ts
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
Spruha - NextJs Typescript App-Router Admin Dashboard Template / : Root template folder contain all js, scss, images
and other files.
app/ : For server-side routing, you can use Next.js's API routes feature.
(components)/: A grouping folder for four layouts. The parentheses indicate a grouping, not a route itself.
(authenticationlayout)/ : A grouping folder for authentication-related pages.(contentlayout)/ : A grouping folder for components.(ecommercelayout)/ : A grouping folder for ecommerce components.(landinglayout)/ : 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-config.ts : Configuration file for customizing your Next.js setup.package.json : Contains metadata about the project and its dependencies.plugin.d.ts : Declaration file to handle package redeclaration errors.README.md : Project documentation and instructions.tsconfig.json : Typescript configuration file.Each folder within the /app directory corresponds to a route. For example:
To create nested routes, simply nest folders. For example: