Next.js App Router

The official Next.js integration for SiteLift. Seamlessly connect your Next.js App Router project to your SiteLift dashboard and render lightning-fast, SEO-optimized blog articles directly from the server.

This package comes equipped with a lightweight, zero-dependency client and an intuitive CLI tool to scaffold a ready-to-use blog structure into your codebase within seconds. View on npm

Quick Start

Get up and running with the Next.js App Router integration in minutes.

Installation

Add the package to your project using npm, pnpm, or yarn:

npm install @getsitelift/nextjs-blog

(Note: Requires Node.js 18.17+ and a Next.js App Router setup)

Configuration

Locate your API key in the SiteLift dashboard (Settings → Integrations → Next.js Blog). Store the key securely in your .env.local file:

SITELIFT_BLOG_API_KEY=your_api_key_here

Scaffold Your Blog (Recommended)

Want to skip the manual setup? Use our built-in CLI to instantly generate a clean, unstyled blog architecture right inside your Next.js application.

Run the following command at the root of your project:

npx @getsitelift/nextjs-blog init

Need it in a specific folder? Pass the path: npx @getsitelift/nextjs-blog init src/app. Use --force if you need to overwrite an existing blog directory.

Built-in Routes from the CLI

When you use the init command, you get the following structure out of the box:

Post-Scaffold Checklist

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [{ protocol: "https", hostname: "*" }],
  },
};

export default nextConfig;

Start Developing: Run npm run dev and navigate to /blog to see your articles in action!

Manual Integration

If you prefer to build the pages yourself, it's just as simple. Instantiate the BlogClient in a utility file and fetch data directly in your Server Components.

1. Create the Client

import { BlogClient } from "@getsitelift/nextjs-blog";

export const siteLiftBlog = new BlogClient({
  apiKey: process.env.SITELIFT_BLOG_API_KEY,
  revalidate: 86400, // Caches responses for 24 hours
});

2. List Articles

import { siteLiftBlog } from "@/lib/sitelift";
import Link from "next/link";

export default async function BlogArchive() {
  const articles = await siteLiftBlog.listArticles();

  return (
    <section>
      <h1>Our Latest Articles</h1>
      {articles.map((article) => (
        <article key={article.id}>
          <Link href={`/blog/${article.slug}`}>
            <h2>{article.title}</h2>
          </Link>
        </article>
      ))}
    </section>
  );
}

3. Render a Single Article

import { siteLiftBlog } from "@/lib/sitelift";
import { notFound } from "next/navigation";

export default async function ArticleView({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const article = await siteLiftBlog.getArticleBySlug(slug);

  if (!article) return notFound();

  return (
    <main>
      {/* Article content includes Title and Featured Image */}
      <div dangerouslySetInnerHTML={{ __html: article.contentHtml || "" }} />

      {/* Display Tags */}
      {article.tags && <p className="leading-loose">Tags: {article.tags.join(", ")}</p>}
    </main>
  );
}

Data Caching & Next.js ISR

This package is designed to work harmoniously with Next.js Incremental Static Regeneration (ISR).

BlogClient API Reference

Available Methods

Available Article Fields

When you fetch an article, you have access to a rich set of data: