> From the [Strife developer docs](https://strife.app/docs/tutorials/next.js). Every page is listed in [llms.txt](https://strife.app/docs/llms.txt).

# Next.js

Build an application using Next.JS and Strife

### Prerequisites

> [!WARNING]
> 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](https://nextjs.org/docs/getting-started/installation) app

### Installation

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

```bash title=">_ Terminal"
npm install ravendb --save
```

### Configuration

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

> [!NOTE]
> You may need to create `.env.local` if it does not exist.

```sh title=".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:

> [!NOTE]
> This query uses a predefined index called `Content/ByUrl`. The index is used to query content based on a relative URL.

```javascript title="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](https://nextjs.org/docs/pages/api-reference/components/script) in your Next.js app just before the end of the `<html>` tag in your `src/app/layout.js` file:

```javascript title="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.

```html title="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. 🎉