Using Skrip with Next.js

Setup

Install the package and create a content/ directory at your project root.

Fetching a Collection

Use the Skrip API inside a Server Component:

// app/blog/page.tsx
async function getPosts() {
  const res = await fetch('http://localhost:3000/api/collections/blog')
  const { collection } = await res.json()
  return collection.items
}

export default async function BlogPage() {
  const posts = await getPosts()
  return (
    <ul>
      {posts.map(post => (
        <li key={post.slug}>{post.data.title}</li>
      ))}
    </ul>
  )
}

Fetching a Single Item

// app/blog/[slug]/page.tsx
export default async function PostPage({ params }) {
  const res = await fetch(`http://localhost:3000/api/collections/blog/${params.slug}`)
  const { item } = await res.json()

  return (
    <article>
      <h1>{item.data.title}</h1>
      <p>{item.content}</p>
    </article>
  )
}

Generating Static Params

export async function generateStaticParams() {
  const res = await fetch('http://localhost:3000/api/collections/blog')
  const { collection } = await res.json()
  return collection.items.map(item => ({ slug: item.slug }))
}