Next.js

Create New Page

Create new pages using Next.js App Router in the NextSaaS project.

This guide covers creating new pages in the NextSaaS project (Next.js 15+ App Router).

Project structure overview

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
  hooks/                # Custom hooks
  icons/                # Icon components
  interface/            # TypeScript interfaces
  utils/                # Utilities

Creating a page

Create the page directory and file

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

Create the basic page structure

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

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

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>
      <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 className="bg-background-2 dark:bg-background-5">
        <YourPageHero />
        <YourPageContent />
      </main>

      <FooterOne />
    </Fragment>
  )
}

YourPageName.displayName = 'YourPageName'
export default YourPageName

Create page components

Create a folder for your page components:

Terminal

mkdir src/components/your-page-name

Example hero component:

// 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="mb-6 text-center">Your Page Title</h1>
        </RevealAnimation>
        <RevealAnimation delay={0.2}>
          <p className="text-secondary dark:text-accent text-center">Your page description goes here.</p>
        </RevealAnimation>
      </div>
    </section>
  )
}

export default YourPageHero

Animation guidelines

Use RevealAnimation for entrance animations:

import RevealAnimation from '../animation/RevealAnimation'

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

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

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

Best practices

Use kebab-case for directories: your-page-name
Use PascalCase for components: YourComponent.tsx
Add displayName to components
Use TypeScript interfaces for props
Prefer Fragment over unnecessary wrapper divs

Customization

Customize colors and typography by editing variables.

Deployment

Deploy your Next.js project to Vercel.