My first app using NextJs and MongoDB

Today, we’re going to create our first NextJS app that uses MongoDB to store information. This will be a simple products app that shows a list of products on the homepage. We will also build the tools to let us add, edit or delete products as needed. Let’s start?

First, we run this command:

npx create-next-app product-list

cd product-list

Now, we’re going to add some extra packages:

npm i bootstrap

npm i mongodb

We make sure that we have running the mongo service. After that, we should create this file .env.local into the root project and add these variables MONGODBURI and MONGODBDB_NAME into the file, where the first variable should have the connection string to the mongo service and the second should have the database name.

We’re going to create a new folder named lib and add the javascript mongo.js into it. This file should have this code:

  import { MongoClient } from  'mongodb';


  // URI to connect to the mongo service.
  const  uri = process.env.MONGODB_URI;

  // Database name.
  const  db_name = process.env.MONGODB_DB_NAME;

  const  options = {};

  // Check the URI exists.
  if (!process.env.MONGODB_URI) {

    throw  new  Error('Please add your Mongo URI to .env.local');

  }

  // Instance the Mongo client.
  const  client = new  MongoClient(uri, options);

  // Connect to the mongo client.
  const  connected = await  client.connect();

  // Connect to the database.
  const  connectToDatabase = connected.db(db_name);


  export  default  connectToDatabase;

Then, we'll start the development server. It has hot reloading built-in and links to the docs on the generated home page.

  npx next dev

After that, we’re going to create 2 components inside src/components/ with the next code: productform.js

import React from 'react';

/**
* This is a product form component.
*/
class ProductForm extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      _id: '',
      product_name: '',
      quantity: '',
      price: ''
    };
  }

  // Update the state after adding or editing a product.
  onChangedData = (e, field_name) => {
    this.setState({
      [field_name]: e.target.value
    });
  };

  // Clear values.
  clearValues = () => {
    this.setState({
      _id: '',
      product_name: '',
      quantity: '',
      price: ''
    });
  }

  // Add a new product.
  onAddFormAction = e => {
    e.preventDefault();
    if (typeof this.props.onAddFormAction == 'function' && this.isValid()) {
      this.props.onAddFormAction({
        product_name: this.state.product_name,
        quantity: this.state.quantity,
        price: this.state.price
      });
      this.clearValues();
    }
  };

  // Edit a product.
  onEditFormAction = e => {
    e.preventDefault();
    if (typeof this.props.onEditFormAction == 'function' && this.isValid()) {
      this.props.onEditFormAction(this.state);
      this.clearValues();
    }
  };

  // Load the values after selecting a product from the list.
  loadValues = product => {
    this.setState({
      _id: product._id,
      product_name: product.product_name,
      quantity: product.quantity,
      price: product.price
    });
  };

  // Display buttons according to the operation.
  showButtons = () => {
    if (this.state._id != '') {
      return (
        <>
          <button type="submit" className="btn btn-primary" onClick={this.onEditFormAction}>Edit</button>
          <a className="btn btn-danger" onClick={this.clearValues}>Cancel</a>
        </>
      );
    }
    return (
      <button type="submit" className="btn btn-primary" onClick={this.onAddFormAction}>Add</button>
    );
  };

  // Check if the state is valid.
  isValid = () => {
    const isValid = Object.keys(this.state).every(key => {
      if (key != '_id') {
        return this.state[key] != '';
      }
      return true;
    });
    if (!isValid) {
      alert("There are some fields empty!");
    }
    return isValid;
  };

  render = () => {
    return (
      <div className='card mb-2 mt-2'>
        <div className='card-body'>
          <h5 className="card-title">Add product</h5>
          <hr className='divider' />
          <form method='post' name='form-product'>
            <div className='row mb-2'>
              <div className="col">
                <input type="text"
                  className="form-control"
                  id="product_name"
                  name="product_name"
                  placeholder='Product name'
                  value={this.state.product_name}
                  required={true}
                  onChange={e => this.onChangedData(e, 'product_name')} />
              </div>
              <div className="col">
                <input type="number"
                  className="form-control"
                  id="product_quantity"
                  name="product_quantity"
                  placeholder='Quantity'
                  value={this.state.quantity}
                  required={true}
                  onChange={e => this.onChangedData(e, 'quantity')} />
              </div>
              <div className="col">
                <input type="number"
                  className="form-control"
                  id="product_price"
                  name="product_price"
                  placeholder='Price'
                  value={this.state.price}
                  required={true}
                  onChange={e => this.onChangedData(e, 'price')} />
              </div>
              <div className='col'>
                <div className="d-grid gap-2 d-md-flex">
                  {this.showButtons()}
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default ProductForm;

productlist.js

import React from 'react';

/**
* This is the product list component.
*/
class ProductList extends React.Component {

    // Action to edit a product.
    onEdit = (e, product) => {
        e.preventDefault();
        if (typeof this.props.onEdit == 'function') {
            this.props.onEdit(product);
        }
    };

    // Action to delete a product.
    onDelete = (e, product) => {
        e.preventDefault();
        if (typeof this.props.onEdit == 'function') {
            this.props.onDelete(product);
        }
    };

  render = () => {
    return (
      <>
        <ul className="nav nav-tabs" role="tablist">
          <li className="nav-item" role="presentation">
            <button className="nav-link active" id="product-list-tab" databstoggle="tab" databstarget="#product-list-tab" type="button" role="tab" aria-controls="product-list-tab" aria-selected="true">Product list</button>
          </li>
        </ul>
        <div className="tab-content">
          <div className="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="product-list-tab">
            <table className="table">
              <thead className="thead-light">
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Product name</th>
                  <th scope="col">Quantity</th>
                  <th scope="col">Price</th>
                  <th scope="col">Action</th>
                </tr>
              </thead>
              <tbody>
                {/* List products */}
                {
                  this.props.products.map((p, i) => {
                    return (
                    <tr key={p._id}>
                      <th scope="row">{i + 1}</th>
                      <td>{p.product_name}</td>
                      <td>{p.quantity}</td>
                      <td>{p.price}</td>
                      <td>
                        <div className="d-grid gap-2 d-md-flex">
                          <button className='btn btn-light' onClick={e => this.onEdit(e, p)}>Edit</button>
                          <button className='btn btn-danger' onClick={e => this.onDelete(e, p)}>Delete</button>
                        </div>
                      </td>
                    </tr>
                    );
                  })
                }
              </tbody>
            </table>
          </div>
        </div>
      </>
    );
  };
}

export default ProductList;

We should add this code to the index.js

import React from 'react';
import ProductForm from '../components/productform';
import ProductList from '../components/productlist';

/**
* Home component to display the main view.
*/
class Home extends React.Component {

constructor(props) {
    super(props);
    // Create a product form reference.
    this.productForm = React.createRef();
    this.state = {
    products: []
    };
}

// After mounting the component, the list is loaded.
componentDidMount = () => {
    this.loadList();
};

// Load a list of products.
loadList = () => {
    fetch('/api/list').then(response => {
    return response.text();
    }).then(value => {
    this.setState({ products: JSON.parse(value) });
    });
}

// Add a new product.
onAddFormAction = data => {
    const request = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
    };
    fetch('/api/addproduct', request)
    .then(response => {
        if (response.status == 200) {
        this.loadList();
        }
    });
};

// Edit a selected product.
onEditFormAction = data => {
    const request = {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
    };
    fetch('/api/editproduct', request)
    .then(response => {
        if (response.status == 200) {
        this.loadList();
        }
    });
};

// Load a selected product into the form.
onEdit = product => {
    if (typeof this.productForm.current.loadValues == 'function') {
    this.productForm.current.loadValues(product);
    }
};

// Remove a selected product.
onDelete = product => {
    const request = {
    method: 'DELETE',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(product)
    };
    fetch('/api/deleteproduct', request)
    .then(response => {
        if (response.status == 200) {
        this.loadList();
        }
    });
};

render = () => {
  return (
    <div className='container'>
      <div className='row'>
        <div className='col'>
          <div className="card mt-2">
            <div className="card-header">
              Product details
            </div>
            <div className="card-body">
              {/* This is the form to add or edit a product. */}
              <ProductForm
              ref={this.productForm}
              onAddFormAction={this.onAddFormAction}
              onEditFormAction={this.onEditFormAction} />
              {/*This is a component to list products and also has the actions to edit or delete them. */}
              <ProductList
              products={this.state.products}
              onEdit={this.onEdit}
              onDelete={this.onDelete} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );}
}

export default Home;

Now, we’re going to add some APIs into src/api/: list.js

import connectToDatabase from '../../../lib/mongodb';
import { Db } from 'mongodb';

/**
* API to list a product.
*/
export default async (req, res) => {
  // Get the connection to the database.
  const db = await connectToDatabase;
  // Array of products.
  let products = [];
  // Check if db is a database object.
  if (db instanceof Db) {
    // Get a list of products from the collection. By default 20 products
    products = await db
      .collection("products")
      .find({})
      .sort({ id: -1 })
      .limit(20)
      .toArray();
  }
  // Return 200 and a list of products.
  res.status(200).json(products);
};

addproduct.js

import connectToDatabase from '../../../lib/mongodb';
import { Db } from 'mongodb';

/**
* API to add a product.
*/
export default async (req, res) => {
  try {
    // Get the connection to the database.
    const db = await connectToDatabase;
    // Check if db is a database object.
    if (db instanceof Db) {
      // Add a product to the collection.
      db.collection('products').insertOne({
          'product_name': req.body.product_name,
          'quantity': req.body.quantity,
          'price': req.body.price
      });
    }
    // Return 200 if everything was successful.
    res.status(200).json("Successful!");
  } catch (e) {
    // Return 500 if there is an error.
    res.status(500).json("Error!");
    console.error(e);
  }
};

editproduct.js

import connectToDatabase from '../../../lib/mongodb';
import { Db, ObjectId } from 'mongodb';

/**
* API to edit a product.
*/
export default async (req, res) => {
  try {
    // Get the connection to the database.
    const db = await connectToDatabase;
    // Check if db is a database object.
    if (db instanceof Db) {
      // Update the product in the collection using the _id.
      db.collection('products').updateOne({
        _id: ObjectId(req.body._id)
      }, {
        $set: {
          'product_name': req.body.product_name,
          'quantity': req.body.quantity,
          'price': req.body.price
        }
      });
    }
    // Return 200 if everything was successful.
    res.status(200).json("Successful!");
  } catch (e) {
    // Return 500 if there is an error.
    res.status(500).json("Error!");
    console.error(e);
  }
};

deleteproduct.js

import connectToDatabase from '../../../lib/mongodb';
import { Db, ObjectId } from 'mongodb';

/**
* API to delete a product.
*/
export default async (req, res) => {
  try {
    // Get the connection to the database.
    const db = await connectToDatabase;
    // Check if db is a database object.
    if (db instanceof Db) {
      // Delete a product in the collection by _id.
      db.collection('products').deleteOne({ "_id": ObjectId(req.body._id) });
    }
    // Return 200 if everything was successful.
    res.status(200).json("Successful!");
  } catch (e) {
    // Return 500 if there is an error.
    res.status(500).json("Error!");
    console.error(e);
  }
};

And our application should look like this:

nextjs products app 0

Additionally, we can add some validations to our application and make sure the user can’t add an empty product.

If you want to check it out, here is the complete code: https://github.com/jjosequevedo/product-list

Related
articles

First steps with Next.js

read moreright arrow