Contentful

# JavaScript/TypeScript SDK
npm install contentful

# Rich text renderer dla React
npm install @contentful/rich-text-react-renderer

# TypeScript types generator (opcjonalnie)
npm install contentful-typescript-codegen --save-dev

// lib/contentful.ts
import { createClient } from 'contentful'

// Delivery API client (dla published content)
export const contentfulClient = createClient({
  space: process.env.CONTENTFUL_SPACE_ID!,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN!,
})

// Preview API client (dla draft content)
export const previewClient = createClient({
  space: process.env.CONTENTFUL_SPACE_ID!,
  accessToken: process.env.CONTENTFUL_PREVIEW_TOKEN!,
  host: 'preview.contentful.com',
})

// Helper function do wyboru klienta
export function getClient(preview = false) {
  return preview ? previewClient : contentfulClient
}

# .env.local
CONTENTFUL_SPACE_ID=your_space_id
CONTENTFUL_ACCESS_TOKEN=your_delivery_token
CONTENTFUL_PREVIEW_TOKEN=your_preview_token
CONTENTFUL_MANAGEMENT_TOKEN=your_management_token

Content Type: Blog Post (blogPost)
├── title (Short text) - required
├── slug (Short text) - unique
├── excerpt (Long text)
├── content (Rich text) - required
├── featuredImage (Media, single)
├── author (Reference → Author)
├── category (Reference → Category)
├── tags (References → Tag, many)
├── publishDate (Date & time)
├── seoMetadata (Reference → SEO)
└── relatedPosts (References → Blog Post, many)

Pole: slug
├── Required: true
├── Unique: true
├── Match pattern: ^[a-z0-9]+(?:-[a-z0-9]+)*$
└── Help text: "URL-friendly slug (tylko małe litery, cyfry i myślniki)"

Pole: excerpt
├── Required: false
├── Size: max 300 characters
└── Help text: "Krótki opis do 300 znaków"

Pole: featuredImage
├── Required: true
├── Accept only: Images
├── Image dimensions: min 800x600
└── File size: max 5MB

Content Type: Page (page)
├── title (Short text)
├── slug (Short text)
├── sections (References → many)
│   ├── Hero Section
│   ├── Feature Grid
│   ├── Testimonials
│   ├── CTA Block
│   └── FAQ Section
└── seo (Reference → SEO)

Content Type: Hero Section (heroSection)
├── headline (Short text)
├── subheadline (Long text)
├── backgroundImage (Media)
├── ctaText (Short text)
├── ctaLink (Short text)
└── alignment (Short text, dropdown)

import { contentfulClient } from '@/lib/contentful'
import type { Entry, EntryCollection } from 'contentful'

// Pobierz wszystkie blog posts
async function getBlogPosts() {
  const entries = await contentfulClient.getEntries({
    content_type: 'blogPost',
    order: ['-fields.publishDate'],
    limit: 10,
  })

  return entries.items
}

// Pobierz pojedynczy post by slug
async function getBlogPostBySlug(slug: string) {
  const entries = await contentfulClient.getEntries({
    content_type: 'blogPost',
    'fields.slug': slug,
    limit: 1,
  })

  return entries.items[0] || null
}

// Pobierz z relacjami (include depth)
async function getBlogPostWithRelations(slug: string) {
  const entries = await contentfulClient.getEntries({
    content_type: 'blogPost',
    'fields.slug': slug,
    include: 3, // Głębokość resolving relacji (max 10)
    limit: 1,
  })

  return entries.items[0] || null
}

// Equality
const techPosts = await contentfulClient.getEntries({
  content_type: 'blogPost',
  'fields.category.sys.id': 'categoryId123',
})

// Not equal
const nonFeatured = await contentfulClient.getEntries({
  content_type: 'blogPost',
  'fields.featured[ne]': true,
})

// In array
const selectedCategories = await contentfulClient.getEntries({
  content_type: 'blogPost',
  'fields.category.sys.id[in]': 'cat1,cat2,cat3',
})

// Exists
const withImage = await contentfulClient.getEntries({
  content_type: 'blogPost',
  'fields.featuredImage[exists]': true,
})

// Range (numbers, dates)
const recentPosts = await contentfulClient.getEntries({
  content_type: 'blogPost',
  'fields.publishDate[gte]': '2024-01-01',
  'fields.publishDate[lte]': '2024-12-31',
})

// Full-text search
const searchResults = await contentfulClient.getEntries({
  content_type: 'blogPost',
  query: 'javascript react', // Szuka w wszystkich text fields
})

// Full-text w konkretnym polu
const titleSearch = await contentfulClient.getEntries({
  content_type: 'blogPost',
  'fields.title[match]': 'Next.js',
})

// Location (near coordinates)
const nearbyEvents = await contentfulClient.getEntries({
  content_type: 'event',
  'fields.location[near]': '52.52,13.405', // lat,lon
  'fields.location[within]': '52.0,13.0,53.0,14.0', // bounding box
})

// Sortowanie
const entries = await contentfulClient.getEntries({
  content_type: 'blogPost',
  order: ['-fields.publishDate', 'fields.title'], // - dla descending
})

// Paginacja
const PAGE_SIZE = 10

async function getPaginatedPosts(page: number) {
  const skip = (page - 1) * PAGE_SIZE

  const entries = await contentfulClient.getEntries({
    content_type: 'blogPost',
    order: ['-fields.publishDate'],
    skip,
    limit: PAGE_SIZE,
  })

  return {
    items: entries.items,
    total: entries.total,
    currentPage: page,
    totalPages: Math.ceil(entries.total / PAGE_SIZE),
    hasNextPage: skip + PAGE_SIZE < entries.total,
    hasPrevPage: page > 1,
  }
}

// Selekcja pól (zmniejszenie payload)
const minimalPosts = await contentfulClient.getEntries({
  content_type: 'blogPost',
  select: ['fields.title', 'fields.slug', 'fields.excerpt'],
})

interface ContentfulResponse<T> {
  sys: {
    type: 'Array'
  }
  total: number
  skip: number
  limit: number
  items: Entry<T>[]
  includes?: {
    Entry?: Entry<any>[]
    Asset?: Asset[]
  }
}

interface Entry<T> {
  sys: {
    id: string
    type: 'Entry'
    contentType: {
      sys: {
        id: string
      }
    }
    createdAt: string
    updatedAt: string
    revision: number
    locale: string
  }
  fields: T
  metadata: {
    tags: Tag[]
  }
}

// Przykład użycia
interface BlogPostFields {
  title: string
  slug: string
  content: Document // Rich text
  author: Entry<AuthorFields>
  publishDate: string
}

const post = entries.items[0] as Entry<BlogPostFields>
console.log(post.fields.title)
console.log(post.sys.id)

https://graphql.contentful.com/content/v1/spaces/{SPACE_ID}/environments/{ENVIRONMENT}

# Pobierz blog posts
query GetBlogPosts($limit: Int, $skip: Int) {
  blogPostCollection(limit: $limit, skip: $skip, order: publishDate_DESC) {
    total
    items {
      sys {
        id
      }
      title
      slug
      excerpt
      publishDate
      featuredImage {
        url
        title
        width
        height
      }
      author {
        name
        avatar {
          url
        }
      }
    }
  }
}

# Pobierz single post
query GetBlogPost($slug: String!) {
  blogPostCollection(where: { slug: $slug }, limit: 1) {
    items {
      title
      slug
      content {
        json
        links {
          entries {
            inline {
              sys {
                id
              }
              ... on CodeBlock {
                language
                code
              }
            }
            block {
              sys {
                id
              }
              ... on VideoEmbed {
                title
                embedUrl
              }
            }
          }
          assets {
            block {
              sys {
                id
              }
              url
              title
              width
              height
            }
          }
        }
      }
      author {
        name
        bio
      }
      category {
        name
        slug
      }
      tagsCollection {
        items {
          name
          slug
        }
      }
    }
  }
}

// lib/contentful-graphql.ts
import { GraphQLClient, gql } from 'graphql-request'

const endpoint = `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE_ID}`

export const graphQLClient = new GraphQLClient(endpoint, {
  headers: {
    authorization: `Bearer ${process.env.CONTENTFUL_ACCESS_TOKEN}`,
  },
})

// Dla preview
export const previewGraphQLClient = new GraphQLClient(endpoint, {
  headers: {
    authorization: `Bearer ${process.env.CONTENTFUL_PREVIEW_TOKEN}`,
  },
})

// Query helper
export async function fetchGraphQL<T>(
  query: string,
  variables?: Record<string, any>,
  preview = false
): Promise<T> {
  const client = preview ? previewGraphQLClient : graphQLClient
  return client.request<T>(query, variables)
}

npm install @contentful/rich-text-react-renderer @contentful/rich-text-types

import { documentToReactComponents } from '@contentful/rich-text-react-renderer'
import type { Document } from '@contentful/rich-text-types'

interface BlogPostProps {
  content: Document
}

function BlogPost({ content }: BlogPostProps) {
  return (
    <article className="prose prose-lg max-w-none">
      {documentToReactComponents(content)}
    </article>
  )
}

import { documentToReactComponents, Options } from '@contentful/rich-text-react-renderer'
import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types'
import Image from 'next/image'
import Link from 'next/link'

const renderOptions: Options = {
  renderMark: {
    [MARKS.BOLD]: (text) => <strong className="font-bold">{text}</strong>,
    [MARKS.ITALIC]: (text) => <em className="italic">{text}</em>,
    [MARKS.CODE]: (text) => (
      <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">
        {text}
      </code>
    ),
  },

  renderNode: {
    // Headings
    [BLOCKS.HEADING_1]: (node, children) => (
      <h1 className="text-4xl font-bold mt-8 mb-4">{children}</h1>
    ),
    [BLOCKS.HEADING_2]: (node, children) => (
      <h2 className="text-3xl font-bold mt-6 mb-3">{children}</h2>
    ),
    [BLOCKS.HEADING_3]: (node, children) => (
      <h3 className="text-2xl font-semibold mt-4 mb-2">{children}</h3>
    ),

    // Paragraphs
    [BLOCKS.PARAGRAPH]: (node, children) => (
      <p className="mb-4 leading-relaxed">{children}</p>
    ),

    // Lists
    [BLOCKS.UL_LIST]: (node, children) => (
      <ul className="list-disc list-inside mb-4 space-y-2">{children}</ul>
    ),
    [BLOCKS.OL_LIST]: (node, children) => (
      <ol className="list-decimal list-inside mb-4 space-y-2">{children}</ol>
    ),

    // Quotes
    [BLOCKS.QUOTE]: (node, children) => (
      <blockquote className="border-l-4 border-blue-500 pl-4 italic my-4">
        {children}
      </blockquote>
    ),

    // Horizontal rule
    [BLOCKS.HR]: () => <hr className="my-8 border-gray-200" />,

    // Embedded assets (images)
    [BLOCKS.EMBEDDED_ASSET]: (node) => {
      const { title, description, file } = node.data.target.fields
      const { url, details } = file

      return (
        <figure className="my-8">
          <Image
            src={`https:${url}`}
            alt={description || title}
            width={details.image.width}
            height={details.image.height}
            className="rounded-lg"
          />
          {description && (
            <figcaption className="text-center text-gray-500 mt-2 text-sm">
              {description}
            </figcaption>
          )}
        </figure>
      )
    },

    // Embedded entries (custom components)
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
      const entry = node.data.target
      const contentType = entry.sys.contentType.sys.id

      switch (contentType) {
        case 'codeBlock':
          return (
            <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4">
              <code className={`language-${entry.fields.language}`}>
                {entry.fields.code}
              </code>
            </pre>
          )

        case 'videoEmbed':
          return (
            <div className="aspect-video my-8">
              <iframe
                src={entry.fields.embedUrl}
                title={entry.fields.title}
                className="w-full h-full rounded-lg"
                allowFullScreen
              />
            </div>
          )

        case 'callout':
          return (
            <div className={`p-4 rounded-lg my-4 ${
              entry.fields.type === 'warning' ? 'bg-yellow-50 border-yellow-200' :
              entry.fields.type === 'error' ? 'bg-red-50 border-red-200' :
              'bg-blue-50 border-blue-200'
            } border`}>
              <p className="font-medium">{entry.fields.title}</p>
              <p>{entry.fields.message}</p>
            </div>
          )

        default:
          return null
      }
    },

    // Inline entries
    [INLINES.EMBEDDED_ENTRY]: (node) => {
      const entry = node.data.target
      const contentType = entry.sys.contentType.sys.id

      if (contentType === 'inlineCode') {
        return (
          <code className="bg-gray-100 px-1 py-0.5 rounded text-sm">
            {entry.fields.code}
          </code>
        )
      }

      return null
    },

    // Hyperlinks
    [INLINES.HYPERLINK]: (node, children) => (
      <a
        href={node.data.uri}
        target="_blank"
        rel="noopener noreferrer"
        className="text-blue-600 hover:underline"
      >
        {children}
      </a>
    ),

    // Entry hyperlinks (internal links)
    [INLINES.ENTRY_HYPERLINK]: (node, children) => {
      const entry = node.data.target
      const contentType = entry.sys.contentType.sys.id

      let href = '/'
      if (contentType === 'blogPost') {
        href = `/blog/${entry.fields.slug}`
      } else if (contentType === 'page') {
        href = `/${entry.fields.slug}`
      }

      return (
        <Link href={href} className="text-blue-600 hover:underline">
          {children}
        </Link>
      )
    },

    // Asset hyperlinks (file downloads)
    [INLINES.ASSET_HYPERLINK]: (node, children) => {
      const asset = node.data.target
      return (
        <a
          href={`https:${asset.fields.file.url}`}
          download
          className="text-blue-600 hover:underline"
        >
          {children} (📥 Download)
        </a>
      )
    },
  },
}

// Component usage
function RichTextContent({ content }: { content: Document }) {
  return (
    <div className="prose prose-lg max-w-none">
      {documentToReactComponents(content, renderOptions)}
    </div>
  )
}

# Instalacja
npm install contentful-typescript-codegen --save-dev

# Generowanie (wymaga Management API token)
npx contentful-typescript-codegen \
  --spaceId YOUR_SPACE_ID \
  --environment master \
  --output src/types/contentful.d.ts

npm install cf-content-types-generator --save-dev

// package.json
{
  "scripts": {
    "generate:types": "cf-content-types-generator --spaceId $CONTENTFUL_SPACE_ID --token $CONTENTFUL_MANAGEMENT_TOKEN -o src/types/contentful.ts"
  }
}

// src/types/contentful.ts
import type { Entry, Asset } from 'contentful'

export interface IBlogPostFields {
  title: string
  slug: string
  excerpt?: string
  content: Document
  featuredImage?: Asset
  author: Entry<IAuthorFields>
  category?: Entry<ICategoryFields>
  tags?: Entry<ITagFields>[]
  publishDate: string
}

export interface IAuthorFields {
  name: string
  bio?: string
  avatar?: Asset
  socialLinks?: ISocialLink[]
}

export interface ICategoryFields {
  name: string
  slug: string
  description?: string
}

export type IBlogPost = Entry<IBlogPostFields>
export type IAuthor = Entry<IAuthorFields>
export type ICategory = Entry<ICategoryFields>

// lib/contentful.ts
import { createClient, Entry } from 'contentful'
import type { IBlogPost, IBlogPostFields } from '@/types/contentful'

const client = createClient({
  space: process.env.CONTENTFUL_SPACE_ID!,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN!,
})

export async function getBlogPosts(): Promise<IBlogPost[]> {
  const entries = await client.getEntries<IBlogPostFields>({
    content_type: 'blogPost',
    order: ['-fields.publishDate'],
  })

  return entries.items
}

export async function getBlogPostBySlug(slug: string): Promise<IBlogPost | null> {
  const entries = await client.getEntries<IBlogPostFields>({
    content_type: 'blogPost',
    'fields.slug': slug,
    limit: 1,
    include: 3,
  })

  return entries.items[0] || null
}

// lib/contentful.ts
import { createClient } from 'contentful'

export function getContentfulClient(preview = false) {
  return createClient({
    space: process.env.CONTENTFUL_SPACE_ID!,
    accessToken: preview
      ? process.env.CONTENTFUL_PREVIEW_TOKEN!
      : process.env.CONTENTFUL_ACCESS_TOKEN!,
    host: preview ? 'preview.contentful.com' : 'cdn.contentful.com',
  })
}

// app/api/draft/route.ts
import { draftMode } from 'next/headers'
import { redirect } from 'next/navigation'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const secret = searchParams.get('secret')
  const slug = searchParams.get('slug')

  // Verify secret
  if (secret !== process.env.CONTENTFUL_PREVIEW_SECRET) {
    return new Response('Invalid token', { status: 401 })
  }

  if (!slug) {
    return new Response('Missing slug', { status: 400 })
  }

  // Enable Draft Mode
  draftMode().enable()

  // Redirect to the path
  redirect(`/blog/${slug}`)
}

// app/api/disable-draft/route.ts
export async function GET() {
  draftMode().disable()
  redirect('/')
}

// app/blog/[slug]/page.tsx
import { draftMode } from 'next/headers'
import { getContentfulClient } from '@/lib/contentful'

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const { isEnabled: preview } = draftMode()
  const client = getContentfulClient(preview)

  const post = await client.getEntries({
    content_type: 'blogPost',
    'fields.slug': params.slug,
    limit: 1,
  })

  if (!post.items[0]) {
    notFound()
  }

  return (
    <>
      {preview && (
        <div className="bg-yellow-100 p-4 text-center">
          Preview Mode -{' '}
          <a href="/api/disable-draft" className="underline">
            Exit Preview
          </a>
        </div>
      )}
      <article>
        <h1>{post.items[0].fields.title}</h1>
        {/* ... */}
      </article>
    </>
  )
}

URL: https://your-site.com/api/revalidate
Triggers: Entry - Publish, Unpublish, Delete
Headers:
  x-contentful-webhook-secret: your-secret-key

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache'
import { NextRequest } from 'next/server'

interface ContentfulWebhookPayload {
  sys: {
    id: string
    type: string
    contentType?: {
      sys: {
        id: string
      }
    }
  }
  fields?: {
    slug?: {
      'en-US'?: string
    }
  }
}

export async function POST(request: NextRequest) {
  const secret = request.headers.get('x-contentful-webhook-secret')

  if (secret !== process.env.CONTENTFUL_WEBHOOK_SECRET) {
    return Response.json({ message: 'Invalid secret' }, { status: 401 })
  }

  try {
    const payload: ContentfulWebhookPayload = await request.json()
    const contentType = payload.sys.contentType?.sys.id
    const slug = payload.fields?.slug?.['en-US']

    // Revalidate based on content type
    switch (contentType) {
      case 'blogPost':
        revalidateTag('blog-posts')
        if (slug) {
          revalidatePath(`/blog/${slug}`)
        }
        revalidatePath('/blog')
        break

      case 'page':
        revalidateTag('pages')
        if (slug) {
          revalidatePath(`/${slug}`)
        }
        break

      case 'navigation':
        revalidateTag('navigation')
        revalidatePath('/', 'layout')
        break

      default:
        // Revalidate everything for unknown content types
        revalidatePath('/', 'layout')
    }

    return Response.json({
      revalidated: true,
      contentType,
      slug,
    })
  } catch (error) {
    return Response.json({ message: 'Error revalidating' }, { status: 500 })
  }
}

// lib/contentful.ts
import { unstable_cache } from 'next/cache'

export const getBlogPosts = unstable_cache(
  async () => {
    const entries = await contentfulClient.getEntries({
      content_type: 'blogPost',
      order: ['-fields.publishDate'],
    })
    return entries.items
  },
  ['blog-posts'],
  {
    tags: ['blog-posts'],
    revalidate: 3600, // Fallback: 1 hour
  }
)

export const getBlogPostBySlug = unstable_cache(
  async (slug: string) => {
    const entries = await contentfulClient.getEntries({
      content_type: 'blogPost',
      'fields.slug': slug,
      limit: 1,
      include: 3,
    })
    return entries.items[0] || null
  },
  ['blog-post'],
  {
    tags: ['blog-posts'],
    revalidate: 3600,
  }
)

Default: en-US (English)
Additional: pl (Polish), de (German)

// Pobierz w konkretnym locale
const polishPosts = await contentfulClient.getEntries({
  content_type: 'blogPost',
  locale: 'pl',
})

// Pobierz wszystkie locales naraz
const allLocales = await contentfulClient.getEntries({
  content_type: 'blogPost',
  'fields.slug': 'my-post',
  locale: '*', // Wszystkie locales
})

// Struktura odpowiedzi z locale: '*'
{
  fields: {
    title: {
      'en-US': 'My Post',
      'pl': 'Mój Post',
      'de': 'Mein Beitrag'
    }
  }
}

// Settings → Locales → Fallback

// Konfiguracja:
// pl → en-US (jeśli brak tłumaczenia, użyj angielskiego)
// de → en-US

// W kodzie zawsze dostaniesz wartość (z fallbacka jeśli brak tłumaczenia)

// app/[locale]/blog/[slug]/page.tsx
import { getContentfulClient } from '@/lib/contentful'

interface PageProps {
  params: {
    locale: string
    slug: string
  }
}

export default async function BlogPost({ params }: PageProps) {
  const { locale, slug } = params

  const client = getContentfulClient()
  const entries = await client.getEntries({
    content_type: 'blogPost',
    'fields.slug': slug,
    locale: locale,
    include: 3,
  })

  const post = entries.items[0]

  // ...
}

// Generowanie statycznych paths dla wszystkich locales
export async function generateStaticParams() {
  const client = getContentfulClient()
  const locales = ['en', 'pl', 'de']

  const entries = await client.getEntries({
    content_type: 'blogPost',
    select: ['fields.slug'],
  })

  const params = []
  for (const entry of entries.items) {
    for (const locale of locales) {
      params.push({
        locale,
        slug: entry.fields.slug,
      })
    }
  }

  return params
}

npm install contentful-management

import { createClient } from 'contentful-management'

const managementClient = createClient({
  accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN!,
})

// Pobierz space i environment
const space = await managementClient.getSpace(process.env.CONTENTFUL_SPACE_ID!)
const environment = await space.getEnvironment('master')

// Utwórz nowy entry
const entry = await environment.createEntry('blogPost', {
  fields: {
    title: {
      'en-US': 'New Blog Post',
    },
    slug: {
      'en-US': 'new-blog-post',
    },
    content: {
      'en-US': {
        nodeType: 'document',
        data: {},
        content: [
          {
            nodeType: 'paragraph',
            data: {},
            content: [
              {
                nodeType: 'text',
                value: 'This is the content.',
                marks: [],
                data: {},
              },
            ],
          },
        ],
      },
    },
  },
})

// Opublikuj entry
await entry.publish()

// Aktualizuj entry
entry.fields.title['en-US'] = 'Updated Title'
const updatedEntry = await entry.update()
await updatedEntry.publish()

// Upload asset
const asset = await environment.createAssetFromFiles({
  fields: {
    title: {
      'en-US': 'My Image',
    },
    file: {
      'en-US': {
        contentType: 'image/png',
        fileName: 'image.png',
        file: fs.readFileSync('./image.png'),
      },
    },
  },
})

await asset.processForAllLocales()
await asset.publish()

Settings → Apps → Marketplace

Popularne apps:
- AI Content Generator
- Image focal point
- Compose (page builder)
- Launch (scheduled publishing)
- Workflows

npx create-contentful-app my-app
cd my-app
npm start

// src/locations/Field.tsx
import { FieldExtensionSDK } from '@contentful/app-sdk'
import { useSDK } from '@contentful/react-apps-toolkit'

const Field = () => {
  const sdk = useSDK<FieldExtensionSDK>()
  const value = sdk.field.getValue()

  const handleChange = (newValue: string) => {
    sdk.field.setValue(newValue)
  }

  return (
    <div>
      <input
        type="text"
        value={value || ''}
        onChange={(e) => handleChange(e.target.value)}
      />
      <p>Characters: {(value || '').length}</p>
    </div>
  )
}

export default Field

# JavaScript/TypeScript SDK
npm install contentful

# Rich text renderer for React
npm install @contentful/rich-text-react-renderer

# TypeScript types generator (optional)
npm install contentful-typescript-codegen --save-dev

// lib/contentful.ts
import { createClient } from 'contentful'

// Delivery API client (for published content)
export const contentfulClient = createClient({
  space: process.env.CONTENTFUL_SPACE_ID!,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN!,
})

// Preview API client (for draft content)
export const previewClient = createClient({
  space: process.env.CONTENTFUL_SPACE_ID!,
  accessToken: process.env.CONTENTFUL_PREVIEW_TOKEN!,
  host: 'preview.contentful.com',
})

// Helper function to choose the client
export function getClient(preview = false) {
  return preview ? previewClient : contentfulClient
}