@landing-creator/nextjs

Render Landing Creator SEO landing pages in your Next.js app. Pages are generated and hosted on our CDN. This package fetches and renders them with full control over styling.

Quick Start

1. Install

npm install @landing-creator/nextjs

2. Scaffold

npx landing-creator-nextjs init --key pg_your_api_key_here

You'll find your API key in the Landing Creator dashboard. Omit --key and the CLI will ask for it, or leave it blank and fill it in later.

This writes .env.local and creates three files in your app/content/ directory:

• [...slug]/page.tsx, the page component that renders your landing pages
• [...slug]/layout.tsx, a minimal layout wrapper
• sitemap.xml/route.ts, an auto-generated sitemap

That's it. Your pages are live at /content/{slug}.

Set LANDING_CREATOR_DOMAIN before you deploy. Without it the sitemap route returns a 500, and canonical and hreflang URLs are emitted without a host, which search engines treat as broken.

Configuration

All configuration is done via environment variables:

| Variable | Required | Default | Description | |----------|----------|---------|-------------| | LANDING_CREATOR_KEY | Yes | none | Your Landing Creator API key (starts with pg_) | | LANDING_CREATOR_BASE_PATH | No | /content | URL prefix for your landing pages | | LANDING_CREATOR_TRACKING_ID | No | none | Enables view tracking (found in dashboard) | | LANDING_CREATOR_REVALIDATE | No | 3600 | CDN cache revalidation interval in seconds | | LANDING_CREATOR_DOMAIN | For sitemap and canonical URLs | none | Your site's public URL (e.g. https://example.com) |

Your API key doubles as your CDN path. Regenerating it changes every published URL, so treat it as permanent.

Custom base path

Pass the path at scaffold time, so the generated directory and the config always agree:

npx landing-creator-nextjs init --base-path /blog

Changing LANDING_CREATOR_BASE_PATH after scaffolding will not move the generated files, and the mismatch shows up as a 404 with no error. Re-run init with --base-path and delete the old directory instead.

Customization

The generated page.tsx is yours to edit. Every element has a CSS class you can target:

| Class | Element | |-------|---------| | .pg-page | Article wrapper | | .pg-hero | Hero section | | .pg-hero-headline | H1 headline | | .pg-hero-subheadline | Subheadline | | .pg-description | Main description | | .pg-area-intro | Location/area introduction | | .pg-local-facts | Local facts list | | .pg-highlights | Offer highlights | | .pg-benefits | Benefits section | | .pg-benefit | Individual benefit | | .pg-process | Process section | | .pg-use-cases | Use cases section | | .pg-faq | FAQ section | | .pg-faq-item | FAQ item (<details>) | | .pg-faq-question | FAQ question (<summary>) | | .pg-faq-answer | FAQ answer | | .pg-cta | Call to action | | .pg-nav | Navigation links |

A default stylesheet is available at @landing-creator/nextjs/styles.css. Import it in your layout or use your own styles.

TypeScript

The package exports all content types for use in custom components:

import type {
  LandingCreatorContent,
  LandingCreatorHero,
  LandingCreatorBenefit,
  LandingCreatorFaqItem,
} from "@landing-creator/nextjs";

import { hasHighlights, hasAreaIntro } from "@landing-creator/nextjs";

Support

• Dashboard: landingcreator.ai/dashboard