Logo
RavenSaaS Docs

Create New Page

Creation Process

Creating new pages in RavenSaaS follows the same rules as creating new pages in the NextJS framework.NextJS Pages and Layouts

1. Create a new folder in the app/[locale]/(default) directory, create a new page.tsx file, and add content for the new page:

app/[locale]/(default)/new-page/page.tsx
1export default function NewPage() {
2  return (
3    <div className="min-h-screen bg-background">
4      <div className="container mx-auto px-4 py-16 md:py-24">
5        <div className="text-center max-w-3xl mx-auto">
6          <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-4">
7            NEW PAGE
8          </h1>
9          <p className="text-xl text-muted-foreground mb-8">
10            This is an example of a new page, you can customize the content as needed.
11          </p>
12        </div>
13      </div>
14    </div>
15  );
16}
new-page

2. Visit the new page address in your browser to see the rendered content:

new-page-preview

The new page will reuse the layout defined in the app/[locale]/(default)/layout.tsx file, displaying the Header and Footer by default.

If you want your new page to have a different layout, you need to create a new Layout file. For specific steps, refer to the NextJS Layout documentation NextJS Pages and Layouts

Reference

NextJS Pages and Layouts

NextJS Pages and Layouts Documentation

View Docs

Last updated on January 5, 2025