Update example

- Separate out data to be loaded independently
- Add a CI/CD workflow for deploying
- Tweak application

Author: Ethan-Arrowood

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,76 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Harper CLI
+        run: npm install -g harperdb
+
+      - name: Setup Harper
+        env:
+          TC_AGREEMENT: 'yes'
+          HDB_ADMIN_USERNAME: 'admin'
+          HDB_ADMIN_PASSWORD: 'password'
+          ROOTPATH: '/tmp/hdb'
+          OPERATIONSAPI_NETWORK_PORT: 9925
+          LOGGING_LEVEL: 'debug'
+          LOGGING_STDSTREAMS: true
+          THREADS_COUNT: 1
+          THREADS_DEBUG: false
+        run: harperdb install
+
+      - name: Deploy data
+        run: |
+          harperdb start
+          sleep 10
+          harperdb deploy project=basic-data package=HarperDB/basic-data-example replicated=true
+          sleep 10
+          harperdb stop
+
+      - name: Build project
+        run: npm run build
+
+      - name: Add prebuilt flag to config
+        run: yq e '.["@harperdb/nextjs"].prebuilt = true' -i config.yaml
+
+      - name: Upload HarperDB logs
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: harperdb-logs
+          path: /tmp/hdb/log/hdb.log
+          retention-days: 7
+
+      - name: Deploy
+        env:
+          HDB_TARGET: ${{ secrets.HDB_TARGET }}
+          HDB_USERNAME: ${{ secrets.HDB_USERNAME }}
+          HDB_PASSWORD: ${{ secrets.HDB_PASSWORD }}
+        run: |
+          harperdb deploy \
+            target="$HDB_TARGET" \
+            username="$HDB_USERNAME" \
+            password="$HDB_PASSWORD" \
+            project=nextjs-example \
+            skip_node_modules=false \
+            restart=true \
+            replicated=true

README.md

@@ -1,11 +1,16 @@
-# HarperDB Next.js Example
+# Harper Next.js Example
 
-This is an example of how to use [`@harperdb/nextjs`](https://github.com/HarperDB/nextjs) to develop a Next.js application with HarperDB.
+This is an example of how to use [`@harperdb/nextjs`](https://github.com/HarperDB/nextjs) to develop a Next.js application with Harper.
 
 The Next.js application can interact with the database through the [Resource API](https://docs.harperdb.io/docs/technical-details/reference/resource) directly instead of relying on network operations. This is significantly more efficient and enables a better application development experience.
 
+<!-- 
+TODO: Re-record video with new application steps
 > [!TIP]
 > Watch a walkthrough of this example here: [Next.js on HarperDB | Step-by-Step Guide for Next Level Next.js Performance](https://youtu.be/GqLEwteFJYY)
+-->
+
+This example requires the [Harper Basic Data Example](https://github.com/HarperDB/basic-data-example) in order to function. Please follow the instructions in that repo to set up HarperDB with the necessary data before running this example.
 
 ## Get Started
 
@@ -14,9 +19,32 @@ The Next.js application can interact with the database through the [Resource API
 3. Run `npm run dev`
 4. Open [http://localhost:9926](http://localhost:9926) 🎉
 
+### Remote Deployment
+
+The easiest way to demonstrate this application remotely is to use the `prebuilt: true` option and the [Harper CLI](https://docs.harperdb.io/docs/deployments/harper-cli#operations-api-through-the-cli).
+
+1. Locally or in a CI environment, load the necessary data ([Harper Basic Data Example](https://github.com/HarperDB/basic-data-example))
+2. Create a build using `npm run build`
+3. Modify `config.yaml` to include `prebuilt: true` under the `@harperdb/nextjs` component
+5. Then deploy the prebuilt application using the Harper CLI:
+
+```bash
+harperdb deploy \
+	target="<operations api url>" \
+	username="<username>" \
+	password='<password>' \
+	project=nextjs-example \
+	package=HarperDB/nextjs-example \
+	skip_node_modules=false \
+	replicated=true \
+	restart=true
+```
+
+Check out the included [build and deploy workflow](./.github/workflows/deploy.yml) for an example of how to automate this process.
+
 ## How does it work?
 
-This example in and of itself is a [HarperDB Component](https://docs.harperdb.io/docs/developers/components), and is reliant on the `@harperdb/nextjs` extension in order to access to the [HarperDB Globals](https://docs.harperdb.io/docs/technical-details/reference/globals). The globals are only available on server-side code paths such as [server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and [server components](https://nextjs.org/docs/app/building-your-application/rendering/server-components). Any code paths using HarperDB globals must first import the `harperdb` package (i.e. `import('harperdb')`).
+This example in and of itself is a [HarperDB Component](https://docs.harperdb.io/docs/developers/components), and is reliant on the `@harperdb/nextjs` extension in order to access the [Harper Resource API](https://docs.harperdb.io/docs/technical-details/reference/resources). The globals are only available on server-side code paths such as [server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) and [server components](https://nextjs.org/docs/app/building-your-application/rendering/server-components). Any code paths using HarperDB globals must first import the `harperdb` package (i.e. `import('harperdb')`).
 
 > [!TIP]
 > Use the `harperdb-nextjs` CLI (part of the `@harperdb/nextjs` package) to replace the Next.js CLI. For example, `next dev` becomes `harperdb-nextjs dev`. This CLI handles running HarperDB and providing sensible configuration values for the `@harperdb/nextjs` component.

app/layout.js

@@ -1,13 +1,13 @@
 import Link from 'next/link';
 
 export const metadata = {
-	title: 'HarperDB - Next.js App',
+	title: 'Harper - Next.js App',
 };
 
 export default function RootLayout({ children }) {
 	return (
 		<html lang="en">
-			<body style={{ width: '500px', fontFamily: 'sans-serif' }}>
+			<body style={{ width: '800px', fontFamily: 'sans-serif' }}>
 				<header>
 					<nav>
 						<ul
@@ -29,7 +29,7 @@ export default function RootLayout({ children }) {
 				</header>
 				<main>
 					<section style={{ borderBottom: '1px solid' }}>
-						<h1>HarperDB Next.js Example Application</h1>
+						<h1>Harper Next.js Example Application</h1>
 						<p>This application demonstrates multiple distinct Next.js features.</p>
 
 						<p>Use the navigation links to try different page types.</p>

config.yaml

@@ -1,7 +1,3 @@
-graphqlSchema:
-  files: 'schema.graphql'
-jsResource:
-  files: 'resources.js'
 '@harperdb/nextjs':
   package: '@harperdb/nextjs'
-  files: '/*'
+  files: '*'

package-lock.json

@@ -10,7 +10,7 @@
 		"format": "prettier --write ."
 	},
 	"dependencies": {
-		"@harperdb/nextjs": "1.1.3",
+		"@harperdb/nextjs": "1.1.4",
 		"next": "15.3.3",
 		"react": "18",
 		"react-dom": "18"