Nextbase Docs
Guides

Creating Public Dynamic Page

Guide on how to create a public dynamic page in a Next.js application such as in Nextbase.

A public dynamic page in a SaaS site can be something like a product page, a user profile page, etc. These pages are dynamic and are part of the application. They are not just static pages that are part of the marketing site. In Nextbase, we have a (dynamic-pages) route segment (folder) within our src/app folder which contains all the dynamic pages.

So if you want to create a new dynamic page, you can just create a new folder within the (dynamic-pages) folder and create a new page within that folder. You can nest your dynamic pages as deep as you want to get the route you are looking for.

The key difference here is that this page is not cached and is always served fresh.

The layout file for the dynamic pages is at src/app/(dynamic-pages)/layout.tsx.

src/app/(dynamic-pages)/layout.tsx
import { DynamicLayoutProviders } from './DynamicLayoutProviders';
import { getIsAppInMaintenanceMode } from '@/data/anon';
 
// do not cache this layout
export const revalidate = 0;
export const fetchCache = 'only-no-store';
export const dynamic = 'force-dynamic';
 
export const metadata = {
  icons: {
    icon: '/images/logo-black-main.ico',
  },
  title: 'Nextbase Ultimate',
  description: 'Nextbase Ultimate',
};
 
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const isAppInMaintenanceMode = await getIsAppInMaintenanceMode();
  return (
    <DynamicLayoutProviders isAppInMaintenanceMode={isAppInMaintenanceMode}>
      {children}
    </DynamicLayoutProviders>
  );
}

On this page

No Headings