Web Developers : 8-Set up Product Listings in FaunaDB and Showcase Them on a Next.js Product Page

Screenshot from the tutorial

Setting Up Product Listings in FaunaDB and Showcasing Them on a Next.js Product Page

In the world of web development, combining robust databases with efficient frameworks is key to creating dynamic and responsive applications. In this tutorial, we'll walk you through setting up product listings in FaunaDB and displaying them on a Next.js product page. This guide will cover the essentials you need to know, even if you're a beginner.

What You'll Need

Before we dive in, ensure you have the following:

• A FaunaDB account (you can sign up for free).
• Node.js installed on your machine.
• A basic understanding of React and Next.js.

Step 1: Setting Up FaunaDB

1. Create a FaunaDB Database

1. Log in to your FaunaDB account.
2. Create a new database by clicking on the “New Database” button.
3. Give your database a name (e.g., product-listings).

2. Create a Collection

1. In the database dashboard, navigate to the "Collections" section.
2. Click on “New Collection” and name it products. This is where our product listings will reside.

3. Add Sample Data

You can insert data directly in FaunaDB using the dashboard or through the FaunaDB query language (FQL). Here’s how to do it using FQL:

// Sample product data
const sampleProducts = [
    {
        name: "Product 1",
        description: "Description of Product 1",
        price: 29.99
    },
    {
        name: "Product 2",
        description: "Description of Product 2",
        price: 49.99
    },
    {
        name: "Product 3",
        description: "Description of Product 3",
        price: 19.99
    }
];

// FQL query to create products in FaunaDB
for (const product of sampleProducts) {
    client.query(
        q.Create(q.Collection('products'), { data: product })
    ).then(response => console.log(response))
      .catch(error => console.error(error));
}

4. Generate an API Key

1. Go to the "Security" tab in your FaunaDB dashboard.
2. Click on “New Key” and give it a name (e.g., nextjs-key).
3. Copy the generated key; you’ll need it for your Next.js application.

Step 2: Setting Up Your Next.js Application

1. Create a New Next.js Project

Open your terminal and run the following commands:

npx create-next-app@latest product-page
cd product-page

2. Install Required Packages

You’ll need the FaunaDB JavaScript driver to interact with your database. Install it using npm:

npm install faunadb

3. Create a FaunaDB Client

In your Next.js application, create a new file named faunaClient.js in the root directory and add the following code:

import faunadb from 'faunadb';

const client = new faunadb.Client({
    secret: process.env.FAUNADB_SECRET
});

export default client;

4. Set Up Environment Variables

Create a .env.local file in your project root and add your FaunaDB secret key:

FAUNADB_SECRET=your_faunadb_secret_key

Step 3: Fetching Data from FaunaDB

1. Create an API Route

Next.js API routes allow you to create serverless functions. Create a new folder called pages/api and inside it, create a file named products.js:

import client from '../../faunaClient';
import { query as q } from 'faunadb';

export default async function handler(req, res) {
    try {
        const response = await client.query(
            q.Map(
                q.Paginate(q.Documents(q.Collection('products'))),
                q.Lambda(x => q.Get(x))
            )
        );
        res.status(200).json(response.data);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
}

2. Fetch Data in Your Component

Now, let’s create a component to display the product listings. Create a new file called pages/index.js:

import { useEffect, useState } from 'react';

export default function Home() {
    const [products, setProducts] = useState([]);

    useEffect(() => {
        const fetchProducts = async () => {
            const response = await fetch('/api/products');
            const data = await response.json();
            setProducts(data);
        };
        fetchProducts();
    }, []);

    return (
        <div>
            <h1>Product Listings</h1>
            <ul>
                {products.map(product => (
                    <li key={product.ref.id}>
                        <h2>{product.data.name}</h2>
                        <p>{product.data.description}</p>
                        <p>${product.data.price}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
}

Step 4: Run Your Next.js Application

Now that everything is set up, it's time to run your application. Open your terminal and run:

npm run dev

Navigate to http://localhost:3000 in your browser, and you should see your product listings displayed on the page!

Conclusion

Congratulations! You've successfully set up product listings in FaunaDB and showcased them on a Next.js product page. This foundation can be expanded upon to include features like search, filtering, and more, allowing you to create a fully-fledged e-commerce application. Continue exploring and building upon your new skills!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios