Guides
Creating Admin Panel Page
Guide on how to create an admin panel page in Nextbase.
Admin Panel pages are internal web app pages that are only accessible to application administrators. These pages usually require the user to be authenticated and have admin privileges.
All admin panel pages should be children of the layout located at src/app/(dynamic-pages)/(authenticated-pages)/app_admin/layout.tsx. This layout handles checking if the user is authenticated and if they have admin privileges. If the user is not authenticated or does not have admin privileges, they will be redirected to the login page.
Here is an example of how to create an admin panel page:
export default async function YourPageName() {
// Your page content goes here
return <div>// Your JSX goes here</div>;
}Admin panel layout
import { redirect } from "next/navigation";
import { serverGetLoggedInUser } from "@/utils/server/serverGetLoggedInUser";
import { Suspense } from "react";
import { ApplicationAdminSidebar } from "../(application-pages)/_sidebar/ApplicationAdminSidebar";
import { getIsAppAdmin } from "@/data/user/user";
import { InternalNavbar } from "@/components/ui/NavigationMenu/InternalNavbar";
import { ApplicationLayoutShell } from "@/components/ApplicationLayoutShell";
import { Alert } from "@/components/ui/Alert";
export const revalidate = 0;
async function fetchData() {
const user = await serverGetLoggedInUser();
const [isUserAppAdmin] = await Promise.all([getIsAppAdmin(user)]);
return { isUserAppAdmin };
}
export default async function Layout({
children,
}: {
children: React.ReactNode;
}) {
try {
const { isUserAppAdmin } = await fetchData();
if (!isUserAppAdmin) {
return redirect("/dashboard");
}
return (
<ApplicationLayoutShell
sidebar={
<Suspense fallback={<p>Loading ...</p>}>
<ApplicationAdminSidebar />
</Suspense>
}
>
<div className="h-full overflow-y-auto">
<InternalNavbar>
<div className="flex items-center justify-start w-full">
Admin panel
</div>
</InternalNavbar>
<div className="relative flex-1 h-auto mt-8 w-full">
<div className="pl-6 pr-12 space-y-6 pb-10">
<Alert
variant="default"
className="hover:bg-gray-50 dark:hover:bg-slate-800/50 bg-gray-50 dark:bg-slate-800/50 text-gray-600 dark:text-slate-400"
>
All sections of this area are protected and only accessible by
Application Admins. This is a preview of the admin panel for
demo purposes.
</Alert>
{children}
</div>
</div>
</div>
</ApplicationLayoutShell>
);
} catch (fetchDataError) {
// report error
return <p>Error: An error occurred.</p>;
}
}