Installation

# API key
# Found in Settings > Developers tab
OPINLY_API_KEY="<YOUR_API_KEY>"

import type { NextConfig } from 'next'
import { withOpinlyConfig } from '@opinly/next/config'

const nextConfig: NextConfig = {
  // ... your next config ...
}

const withOpinly = withOpinlyConfig({
  // The path where the blog will be hosted. Make sure it matches the blog route in your app
  blogPath: '/blog',
  // The path where the images will be hosted. Make sure it does not overlap with your own assets
  imagesPath: '/images',
  // The name of the company. This is used in the metadata
  companyName: 'REPLACE ME',
  // The namespace of the CDN. This is used to identify the images in the CDN
  // This is found in the Settings > Developers tab
  cdnNamespace: 'REPLACE-ME-xxxxxx',
  // The URL of the site. This is used in the metadata. Do not include a trailing slash.
  siteUrl: 'https://REPLACE-ME.com',
})

module.exports = withOpinly(nextConfig)

// clients/opinly.ts
import { createOpinlyClient } from '@opinly/backend'

export const opinly = createOpinlyClient({
  fetch: (input, init) => fetch(input, { ...init, cache: 'force-cache' }), // Leverage Next.js ISR caching
})

// app/blog/[[...slug]]/page.tsx
import { OpinlyBlog } from '@opinly/next'
import { generateOpinlyMetadata } from '@opinly/next/utils/generate-metadata'
import { opinly } from '@/clients/opinly'
import { ResolvingMetadata } from 'next'

// We set revalidate to false as we'll invalidate the cache via webhooks on the next page
export const revalidate = false

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string[] }> },
  parent: ResolvingMetadata
) {
  return generateOpinlyMetadata(opinly, params, parent)
}

export default async function BlogPage({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string[] }>
  searchParams: Promise<{ page?: string }>
}) {
  const [slugParams, qp] = await Promise.all([params, searchParams])
  const blog = await opinly.content.blog({ params: slugParams })
  return <OpinlyBlog blog={blog} client={opinly} searchParams={qp} />
}

import { opinly } from '@/clients/opinly'
import type { MetadataRoute } from 'next'

export const revalidate = false

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  // Fetch records for all blog posts under your configured prefix
  const blogSiteMapRecords = await opinly.content.sitemapRecords({
    blogUrl: `${process.env.OPINLY_SITE_URL}${process.env.OPINLY_BLOG_PREFIX}`,
  })

  return [
    // Spread in all dynamically generated blog entries
    ...blogSiteMapRecords,
  ]
}