Built for Next.js 14 & App Router

The Headless CMS Engineered for Next.js

Seamless integration with SSR, SSG, and ISR. TypeScript-native SDK, real-time preview, and edge-ready performance. Deploy to Vercel in minutes.

Get Started Free View Documentation
Next.js CMS Integration Dashboard showing content management interface with code preview

Native Next.js Integration

Designed from the ground up for modern Next.js applications. Every feature leverages the framework's full potential.

SSR & SSG Support

Fetch content server-side with getServerSideProps or generate static pages at build time. Perfect balance of performance and freshness.

Pages Router โœ“

App Router Compatible

Full support for Next.js 13+ App Router with React Server Components. Fetch data directly in async components with zero client JS.

App Router โœ“

ISR Ready

Incremental Static Regeneration built-in. Update content without redeploying. Webhooks trigger automatic page revalidation.

On-Demand Revalidation โœ“

TypeScript Native

Full type safety with auto-generated types from your content schema. IntelliSense support for all API responses.

Type-Safe โœ“

Edge Runtime

Deploy to Vercel Edge Network with middleware support. Global content delivery with sub-50ms response times.

Edge Ready โœ“

Image Optimization

Native Next.js Image component support. Automatic responsive images, WebP/AVIF conversion, and blur placeholder generation.

next/image โœ“

SDK & Code Examples

Get started in minutes with our TypeScript SDK. Clean, intuitive APIs that feel native to Next.js.

app/blog/[slug]/page.tsx 
import { hisite } from '@hisite/next';
import { notFound } from 'next/navigation';

// Fetch content in React Server Component
export default async function BlogPost({
  params
}: {
  params: { slug: string }
}) {
  const post = await hisite.getPost({
    slug: params.slug,
    preview: true
  });

  if (!post) {
    notFound();
  }

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

@hisite/next SDK Features

  • Zero-config setup โ€” Works out of the box with environment variables
  • Auto-generated types โ€” TypeScript definitions from your content schema
  • Caching built-in โ€” Smart cache with SWR and React Query support
  • Webhook handlers โ€” Pre-built API routes for ISR revalidation
  • Image helpers โ€” Utilities for next/image integration
npm install @hisite/next

Content Fetching Best Practices

Optimize your Next.js application with these proven patterns for fetching and caching CMS content.

1

Use React Server Components

Fetch content directly in Server Components to eliminate client-side JavaScript. Zero bundle size impact for content rendering.

2

Implement Structured Caching

Leverage Next.js fetch caching with {`{ next: { revalidate: 60 } }`} for stale-while-revalidate patterns.

3

Parallel Data Fetching

Use Promise.all() to fetch multiple content pieces concurrently. Reduces total loading time significantly.

4

ISR for Dynamic Content

Configure export const revalidate = 3600 for pages that need periodic updates without full rebuilds.

5

Generate Static Params

Use generateStaticParams for dynamic routes to pre-render popular pages at build time.

6

Error Boundaries

Wrap CMS-dependent components with error boundaries. Display fallback UI when content is temporarily unavailable.

Real-Time Live Preview

See content changes instantly as you edit. Our live preview system streams updates directly to your browser without page reloads.

Side-by-Side Editing

Edit content on the left, see live preview on the right. Split-screen mode for maximum productivity.

Multi-Device Preview

Preview your content on desktop, tablet, and mobile simultaneously. Responsive design validation built-in.

Collaborative Editing

Multiple team members can edit and preview simultaneously. See cursors and changes in real-time.

Try Live Preview
localhost:3000/blog/preview
LIVE PREVIEW

Building Modern Web Apps with Next.js

Next.js has revolutionized how we build React applications. With features like Server Components, streaming, and edge runtime...

By Sarah Chen โ€ข 5 min read
JD
John Doe is editing...
Updated "Building Modern Web Apps"
Live

Deploy Anywhere

Optimized for modern hosting platforms. Deploy your Next.js CMS-powered site with a single click or command.

Vercel

One-click deploy with zero config. Edge Functions and ISR fully supported.

Netlify

Git-based continuous deployment with edge caching and form handling.

Cloudflare Pages

Deploy to 300+ edge locations. Unmatched global performance.

Self-Hosted

Docker containers for AWS, GCP, Azure, or your own infrastructure.

1

Connect Repository

Link your GitHub, GitLab, or Bitbucket repo to your hosting platform.

2

Add Environment Variables

Set your HiSite API keys and webhook secrets in the dashboard.

3

Deploy & Go Live

Push to main branch triggers automatic build and deployment.

Documentation & Examples

Everything you need to build with HiSite and Next.js. Comprehensive guides, API references, and starter templates.

Documentation

Quick Start Guide

Get your first Next.js + HiSite project running in 5 minutes
API Reference

Complete SDK documentation with TypeScript types
App Router Migration

Migrate from Pages Router to App Router with HiSite

Integration Guides

ISR & Webhooks

Configure on-demand revalidation for instant content updates
Live Preview Setup

Enable real-time preview for your content editors
Authentication & RBAC

Secure your preview routes and API endpoints

Starter Templates

View all examples โ†’
Blog
Personal Blog

Next.js 14 + Tailwind + MDX

E-commerce
Product Catalog

App Router + Stripe + ISR

Docs
Documentation Site

Next.js + Full-text search

Ready to Build with Next.js CMS?

Start building today with our free tier. No credit card required. Deploy to Vercel in minutes.

Start Building Free Schedule a Demo
Free Forever Tier No Credit Card Required 5-Minute Setup