Next.js

Prerequisites

Before you read any further, make sure that you have a valid invite and received the welcome email.

Before you begin, ensure you have the following:

A package manager (NPM)
A Next.js app

Installation

First, install the RavenDB Node.js client using NPM:

>_ Terminal

npm install ravendb --save

Configuration

Add your RavenDB database configuration to the .env.local file in your Next.js app:

You may need to create .env.local if it does not exist.

.env.local

STRIFE_CERTIFICATE=xxx
STRIFE_CERTIFICATE_PASSWORD=xxx
STRIFE_DATABASE_URLS=xxx
STRIFE_DATABASE=xxx

Create your first query

To request the home page based on the URL, create a query using the RavenDB Node.js client:

This query uses a predefined index called Content/ByUrl. The index is used to query content based on a relative URL.

src/app/page.js

import { DocumentStore } from 'ravendb';

const certificate = process.env.STRIFE_CERTIFICATE;

const authOptions = {
  certificate: Buffer.from(certificate, 'base64'),
  type: 'pfx',
  password: process.env.STRIFE_CERTIFICATE_PASSWORD,
};

const store = new DocumentStore(
  process.env.STRIFE_DATABASE_URLS.split(', '),
  process.env.STRIFE_DATABASE,
  authOptions
);
store.initialize();

const session = store.openSession();
const query = session
  .query({ indexName: 'Content/ByUrl' })
  .whereEquals('url', '/');
  
const home = await query.firstOrNull();

Real-Time Preview

Prepare the App for Real-Time Updates

Include the Strife JavaScript SDK using the Script Component in your Next.js app just before the end of the <html> tag in your src/app/layout.js file:

src/app/layout.js

import Script from 'next/script'

// ...

<Script type="module" src="https://esm.sh/@strifeapp/strife@latest" />

Enable Real-Time preview

Locate the first paragraph in src/app/page.js and add the required attributes to enable real-time preview.

src/app/page.js

<p is="str-p" data-field="heading" ...>
    {home.heading}
</p>

Congratulations! You have now seamlessly integrated real-time data updates into your Next.js application using the Strife JavaScript SDK. 🎉