Create New Page

This guide shows how to create a new page in your Next.js project.

How routing works

The project uses the App Router, so the URL path comes from the folder structure inside app/.

Examples:

• app/contact/page.tsx -> /contact
• app/clone/page.tsx -> /clone
• app/blog/[slug]/page.tsx -> /blog/my-post

Create a static page

app/
  new-page/
    page.tsx

import NewPageHero from '@/components/new-page/new-page-hero';
import { generateMetadata as buildMetadata } from '@/utils/generateMetaData';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  ...buildMetadata('New Page - AI Voiceover || Optim AI'),
};

const NewPage = () => {
  return (
    <>
      <NewPageHero />
    </>
  );
};

export default NewPage;

components/
  new-page/
    new-page-hero.tsx

const NewPageHero = () => {
  return (
    <section>
      <div className="main-container">
        <h1>New Page</h1>
      </div>
    </section>
  );
};

export default NewPageHero;

Create a dynamic page

Use a bracket segment for dynamic routes.

Example:

app/
  case-study/
    [slug]/
      page.tsx

This pattern is already used by:

• app/blog/[slug]/page.tsx
• app/use-case/[slug]/page.tsx

Metadata and SEO

The template already centralizes defaults in utils/generateMetaData.ts. Reuse that helper whenever possible so title, description, canonical URL, and OG metadata stay consistent.

Best practices

• use kebab-case for route folders such as new-page
• keep page-specific UI in components/<route-name>/
• use the shared metadata helper instead of repeating SEO config in every file
• update navigation data only when the route should be visible in menus