This guide demonstrates how to create a simple web application using Next.js, leveraging the power of Macrometa's distributed global data network as the backend for storing and interacting with your application data.
Macrometa is a global data network that integrates a multi-model database, streams, and compute into a single, cohesive platform. It allows developers to build high-performance, globally distributed applications with ease.
This example illustrates how to use Macrometa as a backend for your Next.js application with serverless functions. The architecture of our web application is as follows:
- Next.js serves the static pages and handles client-side interactions.
- Macrometa GDN offers its distributed edge data centers as the backend, handling product and customer real-time updates to the application.
- Serverless applications interact with the Macrometa GDN and handle business logic functions like updating inventory and customer data.
At a high level, this guide follows three steps:
- Setting up a Next.js app
- Connecting your Next.js application to the Macrometa distributed multi-modal database to store and retrieve data.
- Implementing serverless functions in Next.js to interact with Macrometa's backend and perform business logic like updating records.
- Open your terminal and navigate to the directory you'd like to create the application.
- Follow these steps to initialize and create a sample Next.js app.
- Navigate to your app folder and run the following command to start the Next.js development server
npm run dev
Follow these steps to run from your local machine:
- Navigate to the app directory and run
npm install
npm run dev
- Add your Macrometa credentials to a
.env.local
file in the root directory of the project.
GDN_URL=<GDN_URL> //your Macrometa GDN URL
GDN_USERNAME=<GDN_USERNAME> // your Macrometa username
GDN_PASSWORD=<GDN_PASSWORD> // password
GDN_FABRIC=<GDN_FABRIC> // GDN fabric.
PRODUCT_COLLECTION=<PRODUCT_COLLECTION> //name of product collection
-
Open http://localhost:3000 with your browser to see the result.
-
Install the
jsc8
package to integrate our Next.js app to Macrometa GDN. The client code for this integration can be found in theutils/c8client.js
file and contains the necessary code to create an instance of the Macrometa client, which can then be utilized throughout your application.
npm install jsc8
- Create a Macrometa client instance
const jsc8 = require('jsc8');
const client = new jsc8(process.env.GDN_URL);
await client.login(process.env.GDN_USERNAME, process.env.GDN_PASSWORD);
client.useFabric(process.env.GDN_FABRIC);
export default client;
With the Macrometa client instance set up, we can now leverage it in our serverless functions to interact with the database. The serverless function code is located in the pages/api
directory.
For this example, we will demonstrate a simple use case where we manage a collection of products and display them in our application. The code for this serverless function can be found in pages/api/products.js
.
Here’s how to use the Macrometa client in your serverless functions
// File: pages/api/products/[product].js
import client from "../../../utils/c8client";
import { toProduct } from "../../../utils/transform";
const PRODUCT_COLLECTION = process.env.PRODUCT_COLLECTION;
export default async function handler(req, res) {
switch (req.method) {
case 'PUT':
await updateProduct(req, res);
break;
case 'DELETE':
await deleteProduct(req, res);
break;
default:
await getProduct(req, res);
break;
}
}
async function getProduct(req, res) {
const { product } = req.query;
try {
const doc = await client.getDocument(PRODUCT_COLLECTION, product);
res.status(200).json(toProduct(doc));
} catch(err) {
if (err.code == 404) {
res.status(404).json({ "message": `Could not find produce ${product}`});
} else {
res.status(500).json({"message": `Could not retrive product: ${err}`});
}
}
}
async function updateProduct(req, res) {
const { product } = req.query;
delete req.body.id;
try {
const doc = await client.updateDocument(PRODUCT_COLLECTION, product, req.body);
res.status(200).json(toProduct(doc));
} catch(err) {
if (err.code == 404) {
res.status(404).json({ "message": `Could not find produce ${product}`});
} else {
res.status(500).json({"message": `Could not retrive product: ${err}`});
}
}
}
async function deleteProduct(req, res) {
const { product } = req.query;
const deletedDoc = await client.deleteDocument(PRODUCT_COLLECTION, product);
res.status(200).json(toProduct(deletedDoc));
}
This function code demonstrates how to perform CRUD operations on our products from the GDN collection. A GDN collection stores different kinds