Creating New Pages in NextSaaS Project#

This guide provides comprehensive instructions for creating new pages in the NextSaaS project, which uses Next.js 15+ with the App Router architecture.

Project Structure Overview#

The project follows Next.js App Router structure:

src/
├── app/                  # App Router pages
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Homepage (/)
│   ├── globals.css       # Global styles
│   ├── [page-name]/      # Static pages
│   │   └── page.tsx
│   └── [dynamic]/        # Dynamic pages
│       └── [slug]/
│           └── page.tsx
├── components/           # React components
│   ├── [page-name]/      # Page-specific components
│   ├── shared/           # Shared components
│   └── ui/               # UI components
├── context/              # React contexts
├── data/                 # Static data (markdown, JSON)
├── hooks/                # Custom hooks
├── icons/                # Icon components
├── interface/            # TypeScript interfaces
└── utils/                # Utility functions

Creating a Page#

Step 1: Create the Page Directory and File

Create a new directory under src/app/ with your page name and a page.tsx file:

Step 2: Create the Basic Page Structure

// src/app/your-page-name/page.tsx
import { Metadata } from 'next';
import { Fragment } from 'react';

// Import components
import NavbarOne from '@/components/shared/header/NavbarOne';
import FooterOne from '@/components/shared/footer/FooterOne';


// SEO Metadata
export const metadata: Metadata = {
  title: 'Your Page Title - NextSaaS',
  description: 'Description of your page for SEO',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  openGraph: {
    title: 'Your Page Title',
    description: 'Description for social sharing',
    type: 'website',
  },
};

const YourPageName = () => {
  return (
    <Fragment>
      {/* Header */}
      <NavbarOne
        className="border-stroke-2 dark:border-stroke-6 bg-accent dark:bg-background-9 border"
        btnClassName="btn-primary hover:btn-white-dark dark:hover:btn-white"
      />

      {/* Main Content */}
      <main className="bg-background-2 dark:bg-background-5">
        <YourPageHero />
        <YourPageContent />
        {/* Add more sections as needed */}
      </main>

      {/* Footer */}
      <FooterOne />
    </Fragment>
  );
};

YourPageName.displayName = 'YourPageName';
export default YourPageName;

Step 3: Create Page Components

Create a directory for your page components:

mkdir src/components/your-page-name

Create your page-specific components:

// src/components/your-page-name/YourPageHero.tsx
import RevealAnimation from '../animation/RevealAnimation';

const YourPageHero = () => {
  return (
    <section className="pt-20 pb-14 md:pt-24 md:pb-20 lg:pt-28 lg:pb-24">
      <div className="main-container">
        <RevealAnimation delay={0.1}>
          <h1 className="text-center mb-6">Your Page Title</h1>
        </RevealAnimation>
        <RevealAnimation delay={0.2}>
          <p className="text-center text-secondary dark:text-accent">Your page description goes here.</p>
        </RevealAnimation>
      </div>
    </section>
  );
};

export default YourPageHero;

Animation Guidelines

Use RevealAnimation for entrance animations:

import RevealAnimation from '../animation/RevealAnimation';

// Basic usage
<RevealAnimation delay={0.1}>
  <div>Your content</div>
</RevealAnimation>

// With direction and offset
<RevealAnimation delay={0.2} direction="up" offset={50}>
  <div>Your content</div>
</RevealAnimation>

// With spring animation
<RevealAnimation delay={0.3} useSpring duration={2}>
  <div>Your content</div>
</RevealAnimation>

Best Practices#

1. File Naming

• Use kebab-case for directories: your-page-name
• Use PascalCase for components: YourComponent.tsx
• Use camelCase for utilities: yourUtilFunction.ts

2. Component Structure

• Always add displayName to components
• Use TypeScript interfaces for props
• Implement proper error handling
• Use Fragment instead of unnecessary div wrappers

3. Performance

• Use RevealAnimation for smooth entrance effects
• Implement lazy loading for heavy components
• Optimize images with Next.js Image component

5. Code Organization

• Keep components focused and single-purpose
• Extract reusable logic into custom hooks
• Use shared components when possible
• Follow the existing project structure