Framework Integration

Framework Integration

Power-SEO works seamlessly with popular frameworks.

Next.js 14+ (App Router)

// app/layout.tsx
import { createMetadata } from '@power-seo/meta';

export const metadata = createMetadata({
  title: 'My Site',
  description: 'Welcome to my site',
  metadataBase: new URL('https://example.com'),
});

Next.js 13 (Pages Router)

// pages/_app.tsx
import { DefaultSEO } from '@power-seo/react';

<DefaultSEO
  titleTemplate="%s | My Site"
  defaultTitle="My Site"
  openGraph={{
    type: 'website',
    siteName: 'My Site',
  }}
/>

Remix v2

// app/routes/index.tsx
import { createMetaDescriptors } from '@power-seo/meta';

export const meta = () =>
  createMetaDescriptors({
    title: 'Home',
    description: 'Welcome to my site',
  });

React SPA (Vite / Create React App)

import { DefaultSEO } from '@power-seo/react';

<DefaultSEO
  titleTemplate="%s | My App"
  defaultTitle="My App"
/>

---

Each framework has specific adapters and helpers. Check the Installation & Setup guide for detailed setup.