OptimAI
Next.js

Content Management

Manage blog posts, use cases, navigation data, and static content in your Next.js project.

The Next.js project mixes Markdown content and TypeScript data files.

Markdown collections

Two sections are file-based:

  • data/blog/ for blog posts
  • data/use-cases/ for use-case pages

These files are loaded from disk by:

  • utils/getMarkDownData.ts for lists and sorting
  • utils/getMarkDownContent.ts for a single page by slug

How slugs work

The slug comes from the Markdown filename.

Example:

data/blog/what-makes-an-ai-voiceover-sound-human.md

This becomes:

/blog/what-makes-an-ai-voiceover-sound-human

The same pattern applies to data/use-cases/*.md.

Sorting

The collection loader supports sorting by a frontmatter field. In the current app, the dynamic blog and use-case pages read collections using order as the sort key, so it is best to keep an order value in your frontmatter when manual ordering matters.

Add a new blog or use case

Create the Markdown file

Add a new .md file inside data/blog/ or data/use-cases/.

Add frontmatter

Use the same fields already used by the existing files, such as:

  • title
  • description
  • image
  • order
  • any additional fields required by the matching UI

Write the content

The page body is rendered from Markdown content below the frontmatter.

Verify the route

Visit the generated route:

  • /blog/<slug>
  • /use-case/<slug>

TypeScript data files

Some content is maintained as arrays and objects in .ts files instead of Markdown.

Common examples:

  • data/pricing.ts for pricing cards
  • data/integrations.ts for integration cards
  • data/clone-voices.ts for voice sample listings
  • data/testimonials.ts for testimonials
  • data/mobile-menu.ts for grouped mobile navigation

Use these files when the content is strongly tied to a component structure or repeated card layout.

Important note about template flows

The current login, signup, and contact experiences are presentational template flows. Their forms call event.preventDefault() and do not submit to a backend by default. If you need real auth, CRM, or email delivery, wire those forms to your own services.

Copyright © 2026