Project structure
The folders of AdminKit for Next.js: App Router routes, components, data, hooks and Sass, and how to add a page with its title and sidebar link.
The free version and AdminKit PRO have the same layout; PRO has more pages, components and plugins in the same folders.
├── public/ images and other files served as they are
├── scripts/ serve.mjs (npm start) and stats.mjs (npm run stats)
├── src/
│ ├── app/ the routes
│ │ ├── layout.tsx <html>, the head scripts and the stylesheet
│ │ ├── (dashboard)/ pages with the sidebar, navbar and footer; page.tsx is /
│ │ └── (auth)/ sign-in, sign-up and error pages, centered
│ ├── components/
│ │ ├── bootstrap/ Modal, Dropdown, Offcanvas, ... (see Components)
│ │ ├── plugins/ ChartJs, VectorMap, ... (see Charts)
│ │ ├── navbar/ the top bar and its menus
│ │ ├── sidebar/ the sidebar and its menu
│ │ ├── settings/ the settings panel (PRO)
│ │ ├── ui/ PageTitle, CountUp, Skeleton, Footer
│ │ └── pages/ what one page uses, in pages/<section>/<page>/
│ ├── contexts/ LayoutProvider: the sidebar toggle
│ ├── data/ pages.json, navigation.ts, stats.json and the other app data
│ ├── hooks/ useColorMode, useTheme, useConfig (PRO), ...
│ ├── layouts/ DashboardLayout, AuthLayout and PageEffects
│ ├── lib/ config.ts, head-scripts.ts, site.ts
│ ├── mocks/ the demo data of the pages
│ └── scss/ app.scss and the Sass partials
└── next.config.ts the static export and BASE_PATHsrc/app/ holds only page.tsx and layout.tsx files. The route groups (dashboard) and (auth) pick the layout and are not part of the URL: src/app/(dashboard)/pages-settings/page.tsx is /pages-settings.
Pages
A page is a server component. It exports its metadata and renders Bootstrap markup and components:
import { PageTitle } from "@/components/ui/page-title";
import { pageMetadata } from "@/lib/site";
export const metadata = pageMetadata("/pages-blank");
export default function Page() {
return (
<>
<PageTitle title="Blank Page" />
<div className="row">
<div className="col-12">
<div className="card">
<div className="card-header">
<h2 className="card-title mb-0">Empty card</h2>
</div>
<div className="card-body"></div>
</div>
</div>
</div>
</>
);
}pageMetadata() reads the title and meta description from src/data/pages.json. Put "use client" on the smallest component that needs state, effects or the browser, not on the page. The components in components/bootstrap/ and components/plugins/ are client components already, so a page can render them directly; Tooltip and Popover clone their child element, so use them inside a client component.
Demo data lives in src/mocks/. Replace it with your own data, fetched in the page or in a client component.
Add a page
-
Create the route, for example
src/app/(dashboard)/reports/page.tsx, from the blank page above withpageMetadata("/reports"). -
Add it to
src/data/pages.json:{ "path": "/reports", "title": "Reports", "layout": "dashboard", "description": "Monthly reports." } -
Link it in the sidebar menu in
src/data/navigation.ts(see Sidebar). -
Run
npm run stats. It updates the counts insrc/data/stats.json, andnpm run lintfails while a route is missing frompages.jsonor the counts are out of date.
A page in (auth) gets the centered layout of the sign-in page instead; use "layout": "auth" for it.
Images and links
Use next/link for links between pages. Images are plain <img> elements with a width and height; write their src with asset() from src/lib/site.ts, so they keep working under a base path:
<img src={asset("/img/avatars/avatar.jpg")} width="40" height="40" alt="" />Imports
@/ is src/: @/components/bootstrap/modal is src/components/bootstrap/modal.tsx.
Last updated on
Installation
Get AdminKit for Next.js from GitHub or the AdminKit PRO download, install it with npm, run the dev server on localhost:3000 and build the static export.
Deployment
Build AdminKit for Next.js into a static export in out/ and deploy it to any static host with clean URLs, at the root or under a base path (BASE_PATH).