Getting Started

Start using Beatrice efficiently in your Next.js projects. Complete examples for fetching and displaying your automatically generated articles.

Quick Setup

Get Beatrice working in your Next.js app in under 5 minutes.

🚀 Try Before You Buy

Want to see Beatrice in action? Check out our complete demo:

The demo includes a fully functional, SEO-optimized blog with search, pagination, and all best practices.

1. Get Your API Token

  1. Log in to your Beatrice dashboard
  2. Go to API Settings in your project
  3. Copy your unique API token

Your token looks like: btc_1234567890abcdef

Test Token (Public)

For testing and development, you can use our public demo token:

BEATRICE_API_TOKEN=dd2125a2-764e-427f-980f-31a6ffab0b04

This token provides access to a set of demo articles so you can test the integration immediately.

2. Add Your Token

Create .env.local in your project root:

BEATRICE_API_TOKEN=btc_1234567890abcdef

3. Make Your First Request

Test the API by fetching all your articles:

const response = await fetch(
  "https://beatrice.app/api/articles?token=YOUR_TOKEN"
);
const { data, pagination } = await response.json();

console.log("Articles:", data);
console.log("Total articles:", pagination.total);

4. Display Articles in Next.js

Create a Blog Page

// app/blog/page.jsx
export default async function BlogPage() {
  const response = await fetch(
    `https://beatrice.app/api/articles?token=${process.env.BEATRICE_API_TOKEN}`,
    { next: { revalidate: 3600 } } // Revalidate every hour
  );
  const { data: articles } = await response.json();

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8">Blog</h1>
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {articles.map((article) => (
          <article key={article._id} className="border rounded-lg p-4">
            <h2 className="text-xl font-semibold mb-2">{article.title}</h2>
            <p className="text-gray-600 mb-4">{article.meta_description}</p>
            <a
              href={`/blog/${article.slug}`}
              className="text-blue-600 hover:underline"
            >
              Read more →
            </a>
          </article>
        ))}
      </div>
    </div>
  );
}

Create Individual Article Pages

// app/blog/[slug]/page.jsx
export async function generateStaticParams() {
  const response = await fetch(
    `https://beatrice.app/api/slugs?token=${process.env.BEATRICE_API_TOKEN}`
  );
  const slugs = await response.json();

  return slugs.map((article) => ({
    slug: article.slug,
  }));
}

export default async function ArticlePage({ params }) {
  const { slug } = params;
  const response = await fetch(
    `https://beatrice.app/api/articles/${slug}?token=${process.env.BEATRICE_API_TOKEN}`
  );
  const { article } = await response.json();

  return (
    <div className="container mx-auto p-6 max-w-4xl">
      <article>
        <h1 className="text-4xl font-bold mb-4">{article.title}</h1>
        <div
          className="prose max-w-none"
          dangerouslySetInnerHTML={{ __html: article.content }}
        />
      </article>
    </div>
  );
}

5. Add Sitemap

// app/sitemap.js
export default async function sitemap() {
  const response = await fetch(
    `https://beatrice.app/api/slugs?token=${process.env.BEATRICE_API_TOKEN}`
  );
  const slugs = await response.json();

  const articles = slugs.map((article) => ({
    url: `https://yoursite.com/blog/${article.slug}`,
    lastModified: article.updatedAt,
    changeFrequency: "weekly",
    priority: 0.8,
  }));

  return [
    {
      url: "https://yoursite.com",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1,
    },
    {
      url: "https://yoursite.com/blog",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.9,
    },
    ...articles,
  ];
}

Complete Working Example

Here's a complete example with error handling and UI:

// app/blog/page.jsx
export default async function BlogPage() {
  const response = await fetch(
    `https://beatrice.app/api/articles?published=published&token=${process.env.BEATRICE_API_TOKEN}`,
    { next: { revalidate: 3600 } }
  );

  if (!response.ok) {
    return <div>Error loading articles</div>;
  }

  const { data: articles, pagination } = await response.json();

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-8">
        Blog ({pagination.total} articles)
      </h1>

      {articles.length === 0 ? (
        <p>No articles found.</p>
      ) : (
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {articles.map((article) => (
            <article
              key={article._id}
              className="border rounded-lg p-4 hover:shadow-lg transition-shadow"
            >
              {article.image && (
                <img
                  src={article.image}
                  alt={article.title}
                  className="w-full h-48 object-cover rounded mb-4"
                />
              )}
              <h2 className="text-xl font-semibold mb-2">{article.title}</h2>
              <p className="text-gray-600 mb-4 line-clamp-3">
                {article.meta_description}
              </p>
              <div className="flex justify-between items-center">
                <a
                  href={`/blog/${article.slug}`}
                  className="text-blue-600 hover:underline font-medium"
                >
                  Read more →
                </a>
                <span className="text-sm text-gray-500">
                  {new Date(article.publishedAt).toLocaleDateString()}
                </span>
              </div>
            </article>
          ))}
        </div>
      )}
    </div>
  );
}

Next Steps

Once you have the basics working:

  • Add pagination for large article collections
  • Implement search functionality
  • Add article categories and filtering
  • Optimize images with Next.js Image component
  • Add SEO metadata for each article

See the API Reference for all available endpoints and parameters.

Common Issues

Token Not Working

  • Make sure you're using the correct token from your project
  • Check that your project is active and not suspended

No Articles Showing

  • Verify that you have published articles in your project
  • Check the published parameter in your API request

Build Errors

  • Ensure your environment variables are properly set
  • Check that your fetch requests include proper error handling

Need Help?