Next.js Integration

Integrate Beatrice seamlessly with your Next.js project using the and take advantage of ISR for SEO and performance.

Why Next.js + ISR?

Beatrice leverages Incremental Static Regeneration (ISR) to publish articles that are pre-rendered for SEO while keeping your build times short. ISR lets you update only specific pages on-demand instead of rebuilding your entire site. Learn more about ISR in the official Next.js documentation.

Key Next.js Features to Use

App Router (Next.js) for server components and better SEO
revalidate to control how often each article page is re-generated
dynamicParams for dynamic routing with ISR
generateStaticParams to prebuild pages based on your articles slugs
generateMetadata to set dynamic meta titles and descriptions per article
createBreadcrumbJsonLd and createFaqJsonLd from next-seo to add rich structured data for SEO

Example Project

To see a full working integration, visit:

GitHub Repository: beatrice-nextjs-example. This repository includes a complete Next.js implementation with ISR, metadata generation, and SEO structured data using Beatrice APIs.
Live Demo: beatrice-nextjs-example.vercel.app. Browse articles in real time, test ISR refreshes, and see structured data in action.
Why Next.js + ISR page: Learn why Next.js + Beatrice is ideal. This page explains the SEO and performance benefits of combining Next.js with Beatrice’s automatic content generation.

Quick Implementation

Fetch All Articles for your Blog Page

// app/blog/page.js
export const dynamic = "force-dynamic";

async function getArticles() {
  const res = await fetch(
    "https://api.beatrice.com/api/articles?token=YOUR_TOKEN",
    {
      next: { revalidate: 3600 }, // revalidate every hour
    }
  );
  const data = await res.json();
  return data.data;
}

export default async function BlogPage() {
  const articles = await getArticles();
  return (
    <div>
      <h1>Blog</h1>
      <ul>
        {articles.map((article) => (
          <li key={article.slug}>{article.title}</li>
        ))}
      </ul>
    </div>
  );
}

Generate Static Params for ISR

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  const res = await fetch(
    "https://api.beatrice.com/api/articles?token=YOUR_TOKEN"
  );
  const data = await res.json();
  return data.data.map((article) => ({ slug: article.slug }));
}

export const dynamicParams = true;
export const revalidate = 3600;

async function getArticle(slug) {
  const res = await fetch(
    `https://api.beatrice.com/api/articles/${slug}?token=YOUR_TOKEN`
  );
  const data = await res.json();
  return data.article;
}

export async function generateMetadata({ params }) {
  const article = await getArticle(params.slug);
  return {
    title: article.title,
    description: article.meta_description,
  };
}

export default async function ArticlePage({ params }) {
  const article = await getArticle(params.slug);
  return (
    <div>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: article.content }} />
    </div>
  );
}

Conclusion

With this setup, your Next.js site will:

Use ISR for fast SEO-optimized pages
Generate new articles automatically on publish
Scale efficiently without long build times

For complete implementation details and ready-to-use code, visit our GitHub project, explore the live demo, and read our Why Next.js page to understand why this setup is ideal for your SEO strategy.