This is an example of how to use @harperdb/nextjs to develop a Next.js application with HarperDB.
The Next.js application can interact with the database through the Resource API directly instead of relying on network operations. This is significantly more efficient and enables a better application development experience.
Tip
Watch a walkthrough of this example here: Next.js on HarperDB | Step-by-Step Guide for Next Level Next.js Performance
- Clone this repo locally
- Run
npm install- If HarperDB is already installed on your machine (we recommend it be installed globally), then run
npm link harperdb.
- If HarperDB is already installed on your machine (we recommend it be installed globally), then run
- Run
npm run dev - Open http://localhost:3000 🎉
This example in and of itself is a HarperDB Component, and is reliant on the @harperdb/nextjs protocol extension component in order to access to the HarperDB Globals. The globals are only available on server-side code paths such as server actions and 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.
Based on Next.js best practices, it is recommended to use this in server actions so that server and client components can both access the same functions. This example demonstrates this pattern by defining two server actions, listDogs and getDog (located in ./app/actions.js). These are then used throughout the application, in both Client and Server components!
