DEV Community: Giridhar

How to Build a Full Stack Content Management System using Next.js, Xata, and Cloudinary

Giridhar — Wed, 23 Nov 2022 07:47:56 +0000

Managing a website's content is always challenging when developing a modern web application. You can manage the content via a database or a hard-coded JSON file. But, when creating large-scale projects, managing files and databases becomes complex. In these cases, using a Content Management System (CMS) is one of the simple and efficient methods.

A CMS is software used to create and manage content with a team. There are many third-party CMS providers, such as Sanity and Strapi. However, someone once said, "If you want something done right, do it yourself."
In this article, I will teach you how to create your own CMS using the latest web development technologies. You'll learn to use a database and Cloudinary to manage your web app's content and digital assets.

Here’s the source code and the final demo if you want to dive directly into the code.

Prerequisites

Before diving into this tutorial, you should:

have a solid understanding of HTML and CSS
know JavaScript's ES6 syntax
understand React and how it works

What You Will Build

You will build a CMS for managing the content of an Ecommerce website. There are various types of content management systems. In this tutorial, we'll create a headless CMS with a back-end system connecting to a database for managing content using a web interface. You will expose the content for the front end via API endpoints and use the data however you like.

Technologies You Will Use

Next.js — a JavaScript framework for building FullStack Jamstack applications. It extends the capabilities of React for writing serverless code
Tailwind CSS — a utility-first CSS framework that uses classes to style the markup
Xata — a serverless database that lets you create Jamstack applications without worrying about deployment or scaling issues
Cloudinary — a platform for managing media assets, such as images

You'll need Cloudinary, Xata, and Netlify accounts to follow along. These services provide a generous free tier you can use for this project.

Getting Started

To help you out, I created a starter codesandbox; fork it and start coding.

Run the following command to start the local development environment.



yarn create next-app my-ecommerce-cms -e https://github.com/giridhar7632/ecommerce-cms-starter
# or
npx create-next-app my-ecommerce-cms -e https://github.com/giridhar7632/ecommerce-cms-starter

The starter code includes all essential dependencies, such as Tailwind CSS, Xata, and others. It also contains several ready-made frontend components styled using Tailwind CSS.
Navigate to the project directory and start your development server after installing the dependencies:



cd my-ecommerce-app

yarn dev

Now you will be able to see the app running at http://localhost:3000. You can also see the preview inside your codesandbox.

Starter Code

I already created the UI of the application in the starter code to make the process simpler. The main things inside the project are:

The **/****pages** directory: Next.js allows file system-based routing. It considers anything inside this directory as a route and the files inside /pages/api as API endpoints
The **/components** directory: If you are familiar with React, you may already know that everything is a reusable component. This directory contains components such as layouts, forms, and everything required. Take a look inside the folders to understand the structure
The **/pages/products.js** file: The route for displaying the products. You can find the components used here inside the /components/Products folder
The **/pages/product** directory: You can create dynamic routes for generating static pages using Next.js. You can define the route using the bracket syntax ([slug]) to make it dynamic. You can find the file [id].js inside this folder. So, you can get the id as a parameter inside that route

Let's configure the database and add API endpoints to make the UI interactive.

Connecting to Database

Xata is the serverless database that you will use to develop this CMS. Using Xata, you can store all the data inside a fully configured database without worrying about deployment and scaling.
Xata provides a CLI tool, @xata.io/cli, for creating and managing databases directly from the terminal.

Run the command below to install the Xata CLI globally and use it in your project.



yarn add -g @xata.io/cli
# or
npm i -g @xata.io/cli

After the installation, use the below command to generate an API key for Xata.



xata auth login

Xata will prompt you to select from the following options:

For this project, select the Create a new API key in the browser; give the API key a name when the browser window pops up.

Workspaces symbolize your team, and they are the starting point of Xata where databases are created. You can create one once you log in to your account. The data within the database is organized in the form of tables, which have columns that form a strict schema in the database.

Creating the Table

To add products to the database, begin by constructing a table and its schema for data structuring. The products table will have a few columns, such as:

id — an automated column maintained by Xata
name — a string containing the product's name
description — a string with a description of the product
price — a number containing the product value
stock — the number of items remaining
thumbnail — the image URL of the product
media — multiple URLs to the media of the product

In Xata, you can construct a table using either the browser or your CLI. Now, let's build the table with the CLI. The database schema for this course is already inside the schema.json file of the starter code.



/schema.json

{
  "formatVersion": "1",
  "tables": [
    {
      "name": "products",
      "columns": [
        {
          "name": "name",
          "type": "string"
        },
        {
          "name": "description",
          "type": "text"
        },
        {
          "name": "price",
          "type": "float"
        },
        {
          "name": "stock",
          "type": "int"
        },
        {
          "name": "thumbnail",
          "type": "string"
        },
        {
          "name": "media",
          "type": "multiple"
        }
      ]
    }
  ]
}

Now, execute the following command to populate the database with the given schema.



xata init --schema=schema.json --codegen=utils/xata.js

To create a new database, you must first answer several questions in the terminal. Then the CLI reads the schema from the file and creates a database. It also generates a /utils/xata.js file for using the Xata client. You will use this client to communicate with Xata.

Use the xata random-data command to generate some random data inside your database. Open your Xata workspace inside the browser to see your database in action.

Creating Product Data

Now, let's develop API endpoints for interacting with product data. Inside the /pages/api directory, add a folder called products and file called, createProduct.js. You will use this file to handle the POST request for creating a product within the database.



/pages/api/products/createProduct.js

import { getXataClient } from "../../../utils/xata";
const xata = getXataClient();
const handler = async (req, res) => {
  // create method is used to create records in database
  try {
    await xata.db.products.create({ ...req.body });
    res.json({ message: "Success 😁" });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};
export default handler;

The Xata Client provides methods for accessing the databases; you can use the names of the table to perform operations like xata.db.<table-name> for example. You can also create records inside a database using the create() method of the table.
You can see the form inside /components/ProductForm for adding the required product data. I used react-hook-form to handle the form data in multiple steps.

Uploading Images to Cloudinary

Before adding new product to database, you will first upload the image to Cloudinary and store the image link with product data. Once you have a Cloudinary account, follow the below steps to enable image upload.
There are two ways of uploading media to Cloudinary:

Signed presets
Unsigned presets. Create an unsigned preset to allow users to upload images to your cloud. Go to your Cloudinary Dashboard and navigate to Settings > Upload > Add upload preset.

Configure the Name, Signing Mode, and Folder in the upload preset. Adding a folder is optional, but I recommend you put all your uploaded images in one place. You can learn more about Cloudinary upload presets in their documentation.

Once saved, go to the previous page, where you can find the new unsigned preset.

With your new preset, you can now upload the images to Cloudinary from the frontend. The ThumbnailUpload.js file inside /components/ProductForm directory will handle the image upload and add the image URL to the product data. Add the following code inside the file.



/components/ProductForm/ThumbnailUpload.js

import React, { useState } from "react";
import Button from "../common/Button";

const ThumbnailUpload = ({ defaultValue, setValue }) => {
  const [imageSrc, setImageSrc] = useState(defaultValue);
  const [loading, setLoading] = useState(false);
  const [uploadData, setUploadData] = useState();
  const handleOnChange = (changeEvent) => {
    // ...
  };

  const handleUpload = async (uploadEvent) => {
    uploadEvent.preventDefault();
    setLoading(true);
    const form = uploadEvent.currentTarget;
    const fileInput = Array.from(form.elements).find(
      ({ name }) => name === "file"
    );
    try {
      const formData = new FormData();
      // specifying cloudinary upload preset
      formData.append("upload_preset", "vnqoc9iz");
      for (const file of fileInput.files) {
        formData.append("file", file);
      }
      const res = await fetch(
        "https://api.cloudinary.com/v1_1/scrapbook/image/upload",
        {
          method: "POST",
          body: formData,
        }
      );
      const data = await res.json();
      setImageSrc(data.secure_url);
      // adding the thumbnail URL to te main form data
      setValue("thumbnail", data.secure_url);
      setUploadData(data);
    } catch (error) {
      console.log(error);
    }
    setLoading(false);
  };

  return (
    <form onSubmit={handleSubmit}>
      // ...
    </form>
  );
};
export default ThumbnailUpload;

The code above does the following:

extracts the file from the form input, sends a POST request to the Cloudinary API along with Form data, and returns the public URL of the file
uses the setValue method of react-hook-form to add the image URL to the product form data
And also updates the components' state to make UI interactive

Similarly, you can add multiple image uploads using Promise.all method to handle the product media.



/components/ProductForm/MediaUpload.js

// ...
const MediaUpload = ({ defaultValues = [], setValue }) => {
  const [imageSrc, setImageSrc] = useState([...defaultValues]);
  const [loading, setLoading] = useState(false);
  const [uploadedData, setUploadedData] = useState(false);
  const handleOnChange = (changeEvent) => {
    // ...
  };

  const handleUpload = async (uploadEvent) => {
    uploadEvent.preventDefault();
    setLoading(true);
    const form = uploadEvent.currentTarget;
    const fileInput = Array.from(form.elements).find(
      ({ name }) => name === "file"
    );
    try {
      // adding upload preset
      const files = [];
      for (const file of fileInput.files) {
        files.push(file);
      }
      const urls = await Promise.all(
        files.map(async (file) => {
          const formData = new FormData();
          formData.append("file", file);
          formData.append("upload_preset", "vnqoc9iz");
          const res = await fetch(
            "https://api.cloudinary.com/v1_1/scrapbook/image/upload",
            {
              method: "POST",
              body: formData,
            }
          );
          const data = await res.json();
          return data.secure_url;
        })
      );
      setImageSrc(urls);
      setValue("media", urls);
      setUploadedData(true);
    } catch (error) {
      console.log(error);
    }
    setLoading(false);
  };
  return <form onSubmit={handleUpload}>...</form>;
};
export default MediaUpload;

Now, you should add the product to the database by sending a POST request to the endpoint you created.



/components/Product/AddProduct.js

import { Close } from "../common/icons/Close";
import ProductForm from "../ProductForm";

const AddProduct = ({ props }) => {
  const [isOpen, setIsOpen] = useState(false);
  const handleClose = () => setIsOpen(false);
  const handleOpen = () => setIsOpen(true);
  const onFormSubmit = async (data) => {
    try {
      await fetch(`${baseUrl}/api/products/createProduct`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      }).then(() => {
        handleClose();
        window.location.reload();
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    // ...
  );
};

Now, try to add new products using the form. You can see the files uploaded to your Cloudinary and records created in Xata.

Querying the Product Data

For displaying all the products, you will use client-side rendering. To show the details of each product, let's use server-side rendering with dynamic routing. Create an API endpoint getProducts.js for getting all the product data.

⚠️ Warning: It is advised not to use Xata in client-side programming. It may reveal your API key while retrieving data from the browser. So, we'll get all the data from the Xata inside API routes and deliver it to the client.



/pages/api/products/getProducts.js

import { getXataClient } from "../../../utils/xata";
const xata = getXataClient();
const handler = async (req, res) => {
  // getMany or getAll method can be used to create records in database
  try {
    const data = await xata.db.products.getAll();
    res.json({ message: "Success 😁", data });
  } catch (error) {
    res.status(500).json({ message: error.message, data: [] });
  }
};
export default handler;

Here, you used the getAll method of the table to fetch all the records at one time. Refer to the Xata docs for more ways of fetching data from a table.
Inside the /pages/Products.js file, add the following code for fetching the data from the API.



 /pages/Products.js

import { useEffect, useState } from "react";
// ...

function Products() {
  const [loading, setLoading] = useState(false);
  const [products, setProducts] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await fetch(`/api/products/getProducts`);
        const { data } = await res.json();
        setProducts(data);
      } catch (error) {
        console.log(error);
      }
      setLoading(false);
    };
    fetchData();
  }, []);
  return (
    // ...
  );
}

// ...

In the above code, you are fetching the data inside the useEffect hook from the API you created before. Save your code and head over to the browser. You can see the product data displayed in the form of a table.

You will be redirected to the /product/<some-product-id> when you click on the details. As of now, you'll see an empty page; let's move on to create the add the data.

Generating Static Pages for Product Details

You can find the /product folder inside the /pages directory. As mentioned, I added the [id].js file to generate dynamic routes. You will access the product's id using the parameters of the route. Refer to Next.js documentation for more information on dynamic.
In the following code, first, you are fetching all the items to add paths for getStaticPaths. Then, in getStaticProps, you get the id from the route parameters (params) and bring the single product data for passing the props to the page.



/pages/product/[id].js

import React from "react";
import { getXataClient } from "../../utils/xata";
// ...

const xata = getXataClient();
// props passed in the server while generating the page
function Product({ product }) {
  return (
    // ...
  );
}
export default Product;

// fetching data from xata in server for generating static pages
export async function getStaticProps({ params }) {
  // getting filtered data from Xat
  const data = await xata.db.products
    .filter({
      id: params.id,
    })
    .getFirst();
  return {
    props: { product: data },
  };
}
// pre-rendering all the static paths
export async function getStaticPaths() {
  const products = await xata.db.products.getAll();
  return {
    paths: products.map((item) => ({
      params: { id: item.id },
    })),
    // whether to run fallback incase if user requested a page other than what is passed inside the paths
    fallback: true,
  };
}

Kill the terminal and again run the yarn dev command. Open your browser and try to see the details of any product. Now you can see the page ready with the data. Here's mine:

Updating the Product

Let's add the functionality of updating the product. Create an API route for updating data from serverless functions. Create a new file, updateProduct.js, for updating the data inside your products API directory. Just like creating, you can edit the records in Xata using the update method of the table. The update method will identify the record using it’s id and update the columns with the data.



/pages/api/products/updateProduct.js

import { getXataClient } from "../../../utils/xata";
const xata = getXataClient();
const handler = async (req, res) => {
  // using update method to update records in database
  const { id, ...data } = req.body;
  try {
    await xata.db.products.update(id, { ...data });
    res.json({ message: "Success 😁" });
  } catch (error) {
    console.log(error);
    res.status(500).json({ message: error.message });
  }
};
export default handler;

Navigate to UpdateProduct.js component inside /components/Product to add the function to update the product data. You will send a PUT request to the API endpoint along with the product id and updated data.



/components/Product/UpdateProduct.js

import { baseUrl } from "../../utils/config";
// ...

const UpdateProduct = ({ product, ...props }) => {
  // ...
  const onFormSubmit = async (data) => {
    try {
      await fetch(`${baseUrl}api/products/updateProduct`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ id: product.id, ...data }),
      }).then(() => {
        handleClose();
        window.location.reload();
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    // ...
  );
};
export default UpdateProduct;

Try updating the product data using the form. You will see the data updated on the product details page and Xata table.

Deleting a Product

To delete a specific record from a database, you can use the delete method with the id of the product. Create a new file, deleteProduct.js, inside the /page/api/products folder.



/pages/api/products/deleteProduct.js

import { getXataClient } from "../../../utils/xata";
const xata = getXataClient();
const handler = async (req, res) => {
  // use delete method for deleting the records in database
  const { id } = req.body;
  try {
    await xata.db.products.delete(id);
    res.json({ message: "Success 😁" });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
};
export default handler;

Now, add the handleDelete function inside the DeleteProduct.js component.



/components/Product/DeleteProduct.js

import { baseUrl } from "../../utils/config";
// ...

const DeleteProduct = ({ productId }) => {
  // ...
  const handleDelete = async () => {
    try {
      await fetch(`${baseUrl}/api/products/deleteProduct`, {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ id: productId }),
      }).then(() => {
        handleClose();
        window.location.replace("/products");
      });
    } catch (error) {
      console.log(error);
    }
  };

  return (
    // ...
  );
};
export default DeleteProduct;

You can try deleting the products from the product details page. If it works, you are good to go.

Deploying to Netlify

To make this app available throughout the internet, deploy it to a cloud service. Netlify is an ideal service provider for this project as it supports Xata and Next.js out of the box. Install the Netlify CLI globally using npm to deploy the app from your terminal. Log in to CLI using your Netlify account.



# installing the Netlify CLI globally
npm i -g netlify-cli

# logging into your Netlify account
ntl login

After successful login, try running ntl init inside the project folder to configure Netlify. Answer the prompted questions, and you will have the URL for your deployed site. Here’s mine.

If you face any issues, try to fix them following this guide.

Conclusion

In this tutorial, you have successfully created a CRUD app using Next.js, Xata, and Cloudinary. As Jamstack combines several technologies for markup and APIs, you can use other services besides what you used in this tutorial. You can take this tutorial further by creating the frontend of an e-commerce site using your preferred framework.

Resources

Build a full-stack Jamstack Application

Giridhar — Sat, 16 Oct 2021 04:32:59 +0000

Many modern approaches for designing flexible and scalable web applications have become popular as browsers have evolved. Jamstack is one of these cutting-edge techniques to develop lightning-fast web apps. Jamstack combines the capabilities of JavaScript, APIs, and Markup to create modern, browser-friendly web apps, which can function without any web servers. In this tutorial, you'll create a custom scrapbook application that allows you to store and access your daily memories from anywhere in the world.

Check out the live demo of the application you'll create.

Final demo | Source code

Before diving into this tutorial:

You should have a basic understanding of how to use ES6 features of JavaScript.
You should have beginner-level experience of using React and React Hooks.
It would be advantageous if you have prior expertise with any design system in React.

Tech Stack

Jamstack is unique because it allows you to integrate several technologies to create a full-stack application. You will use the following technologies to create this scrapbook:

Next.js is a React framework that extends the amazing powers of React for creating multiple page apps easily. Without using any backend frameworks like Express, you may use Next.js and its serverless functions to develop your app's frontend and backend.
Chakra-UI provides a plethora of stylish and accessible react components for styling your web application.
You'll be using Airtable as a database solution for this application. Airtable is a spreadsheet/database hybrid with a fantastic API for integrating it into your application.
Cloudinary is a cloud media management platform where you'll upload photos of your scrapbook.
Auth0 enables you to integrate a user authentication system into your app. It uses OAuth 2.0 and provides a secure OAuth layer for your app.

Auth0 and Cloudinary both offer free plans. You can create an account and use it for free to develop this application.

Getting Started
Connecting Airtable to your app
Integrate Airtable with Next.js Serverless functions
Uploading files to Cloudinary
Create React Context for Posts
Setup Authentication with Auth0
Next Steps

Getting Started

Fork this starter code sandbox template and get ready for coding the scrapbook application. If you prefer to use local development, you should have Node and NPM installed.

Running the following command creates a Next.js and Chakra-UI starter application with no configuration.

npx create-next-app --example with-chakra-ui <app-name>
# or
yarn create next-app --example with-chakra-ui <app-name>

Now, head over to Airtable and create a free account for yourself or log in if you already have one. After logging in, create a new base(database) from scratch by clicking on Add a base button and give it a meaningful name. It makes a new base with some primary fields. You can customize the table by double-clicking on the columns. Start customizing the table name to posts and add the following columns:

image - URL
caption - single-line text
cloudinaryId - single-line text
userId - single-line text
date - Date

The base should look something like this:

Next, navigate to Airtable API and select the base you'd like to integrate. Create a .env file in the root directory and add some secrets as environment variables. For connecting Airtable to our app, you'll need the following secrets in the code.

API_KEY: the Airtable API key. You can find it within the documentation(by checking the "Show API key" box in the top right) or on your account page.
BASE_ID: the id of the base you want to integrate. You can find it on the documentation page.
TABLE_NAME: the name of the table in that base (you can use a single base for multiple tables).

/.env

AIRTABLE_API_KEY=<your-airtable-api-key>
AIRTABLE_BASE_ID=<your-airtable-base-id>
AIRTABLE_TABLE_NAME=<your-airtable-table-name>

Install the Airtable JavaScript SDK to work with Airtable inside a Next.js application.

npm install airtable

Also, install the following dependencies to finish setting up your dev environment.

npm install @auth0/nextjs-auth0 multer next-connect cloudinary

For using Auth0 and Cloudinary in your application, you need Auth0 Next.js SDK (@auth0/nextjs-auth0) and Cloudinary SDK (cloudinary) respectively. Multer is for handling file inputs and Next-connect is for dealing with middleware in Next.js API Routes.

Connecting Airtable to Your App

Now, create a new folder /utils inside the /src folder and add a new file Airtable.js. The code below connects your app to Airtable, retrieves the data. By default, the Airtable returns unnecessary data. The minifyRecords function returns the minified version of the record with necessary data.

/utils/Airtable.js

const Airtable = require('airtable')

// Authenticate
Airtable.configure({
  apiKey: process.env.AIRTABLE_API_KEY
})

// Initialize a base
const base = Airtable.base(process.env.AIRTABLE_BASE_ID)

// Reference a table
const table = base(process.env.AIRTABLE_TABLE_NAME)

// To get an array of  meaningful records
const minifyRecords = (records) =>
  records.map((record) => ({
    id: record.id,
    fields: record.fields
  }))

export { table, minifyRecords }

Integrate Airtable with Next.js Serverless Functions

Using API routes, you can construct your own API in Next.js. Any file you add inside the /pages/api folder will be treated as an API endpoint(/api/*) rather than a regular route. You can handle any request that hits the endpoint using serverless functions. Let's create an API endpoint to retrieve Airtable records.

/src/pages/api/getPosts.js

// For retreving posts from Airtable
import { table, minifyRecords } from '../../utils/Airtable'

export default async (req, res) => {
  try {
    // get records from airtable
    const records = await table.select({}).firstPage()

    // send an array of minified records as a response
    const minfiedRecords = minifyRecords(records)
    res.status(200).json(minfiedRecords)
  } catch (error) {
    console.error(error)
    res.status(500).json({ msg: 'Something went wrong! 😕' })
  }
}

Setting up Cloudinary

After uploading the scrapbook photos to Cloudinary, you will need to store the secure_url and public_id to the Airtable database. Go to your Cloudinary Dashboard, copy the following secrets and paste them into the .env file.

/.env

...
CLOUDINARY_CLOUD_NAME=<your-cloudinary-cloud-name>
CLOUDINARY_API_KEY=<your-cloudinary-api-key>
CLOUDINARY_API_SECRET=<your-cloudinary-api-secret>

After adding the environment variables, create a new file cloudinary.js inside /utils directory to setup cloudinary.

/utils/cloudinary.js

import { v2 as cloudinary } from 'cloudinary'

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET
})

export default cloudinary

Uploading Files to Cloudinary

You can upload photos to Cloudinary using the uploader.upload method of Cloudinary SDK. By default, Next.js API routes cannot handle file input. So you're going to use the multer, that will append files to the request. You'll also use next-connect to deal with the middleware functions(Learn more). Create a new file, createPost.js inside /api for uploading images.

/src/pages/api/createPost.js

// For creating a new record in Airtable
import nextConnect from 'next-connect'
import multer from 'multer'
import path from 'path'
import { table, minifyRecords } from '../../utils/Airtable'
import cloudinary from '../../utils/cloudinary'

// multer config
const upload = multer({
  storage: multer.diskStorage({}),
  fileFilter: (req, file, cb) => {
    let ext = path.extname(file.originalname)
    if (ext !== '.jpg' && ext !== '.jpeg' && ext !== '.png') {
      cb(new Error('File type is not supported'), false)
      return
    }
    cb(null, true)
  }
})

const createPost = nextConnect({
  onError(error, req, res) {
    res.status(501).json({ error: error.message })
  }
})

// Adds the middleware to Next-Connect
// this should be the name of the form field
createPost.use(upload.single('image'))

createPost.post(async (req, res) => {
  // Uploading file to cloudinary
  const result = await cloudinary.uploader.upload(req.file.path)
  // Create a new record with required fields
  const post = {
    image: result.secure_url,
    caption: req.body.caption,
    cloudinaryId: result.public_id,
    userId: req.body.userId
  }

  // Create a record with the above fields in Airtable
  // the 'create' method accepts and returns an array of records
  const newRecords = await table.create([{ fields: post }])
  res.status(200).json(minifyRecords(newRecords)[0])
})

export default createPost

export const config = {
  api: {
    bodyParser: false
  }
}

Try using Postman or something similar to test these endpoints. If you run into any problems, compare with the code snippet provided or try troubleshooting using the internet.

Displaying Scrapbook Posts

Now that you have the API, let's design an interface to display the data in our Next.js application. You can use the getServerSideProps function of Next.js with serverside rendering to display data that is coming from an API. Every time the page is rendered, Next.js runs the code contained within this function.

You can learn more about Next.js server-side rendering here.

Add the following code to the index.js file. The posts will be displayed as cards in a grid.

/src/pages/index.js

import { Container } from '../components/Container'
import { Flex, Grid, Text } from '@chakra-ui/react'
import Card from '../components/Card'

export default function Index({ initialPosts }) {
  return (
    <Container minH="100vh">
      <Flex flexDirection="column" justifyContent="center" alignItems="center">
        <Flex w="100%" flexDirection="column" my={8}>
          {!initialPosts.length ? (
            <Flex
              h={['30vh', '50vh']}
              w="100%"
              justifyContent="center"
              alignItems="center"
            >
              <Text fontSize={['2xl', '3xl']} opacity="0.2">
                No Posts Added
              </Text>
            </Flex>
          ) : (
            <Grid
              templateColumns={[
                'repeat(1, 1fr)',
                'repeat(2, 1fr)',
                'repeat(3, 1fr)'
              ]}
              gap={6}
              m="0 auto"
              w={['100%', '90%', '85%']}
            >
              {initialPosts.map((post) => {
                return <Card post={post.fields} key={post.id} />
              })}
            </Grid>
          )}
        </Flex>
      </Flex>
    </Container>
  )
}

export async function getServerSideProps(context) {
  try {
    const res = await fetch('http://localhost:3000/api/getPosts')
    return {
      props: {
        initialPosts: await res.json()
      }
    }
  } catch (error) {
    console.log(error)
    return {
      props: {
        err: 'Something went wrong 😕'
      }
    }
  }
}

/src/components/Card.js

import { Box, Text, useColorModeValue } from '@chakra-ui/react'

const Card = ({ post }) =>
  post ? (
    <Box
      w="100%"
      p={4}
      flex="1"
      borderWidth="1px"
      bg={useColorModeValue('white', 'gray.800')}
      borderColor={useColorModeValue('gray.100', 'gray.700')}
      rounded="lg"
      shadow="md"
    >
      <Text textAlign="right" fontSize="sm" fontWeight="bold" mb={4}>
        {new Date(post.date).toString().substr(0, 15)}
      </Text>
      <a href={post.image} target="_blank" rel="noopener noreferrer">
        <img src={post.image} alt={post.cloudinaryId} loading="lazy" />
      </a>
      <Text fontSize="md" my={4} noOfLines={[3, 4, 5]} isTruncated>
        {post.caption}
      </Text>
    </Box>
  ) : null

export default Card

Create React Context for Posts

Create a React context for Posts to share the state of posts across other components. Create a new context folder inside /src and add a new file posts.js.

/src/context/posts.js

import { createContext, useState } from 'react'

const PostsContext = createContext()

const PostsProvider = ({ children }) => {
  const [posts, setPosts] = useState([])

  const addPost = async (formData) => {
    try {
      // sending the form data
      const res = await fetch('/api/createPost', {
        method: 'POST',
        body: formData
      })
      const newPost = await res.json()

      // updating the posts state
      setPosts((prevPosts) => [newPost, ...prevPosts])
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <PostsContext.Provider
      value={{
        posts,
        setPosts,
        addPost
      }}
    >
      {children}
    </PostsContext.Provider>
  )
}

export { PostsContext, PostsProvider }

Wrap the app around the PostsProvider to use this context in your application.

/src/pages/_app.js

import { PostsProvider } from '../context/posts'
import theme from '../utils/theme'

function MyApp({ Component, pageProps }) {
  return (
    <PostsProvider>
      <ChakraProvider resetCSS theme={theme}>
        ...
      </ChakraProvider>
    </PostsProvider>
  )
}

export default MyApp

Now, update the posts state to the initialPosts inside the index.js file. At this point, you can see the cards populated with data from Airtable.

/src/pages/index.js

import { useContext, useEffect } from 'react'
import { PostsContext } from '../context/posts'

export default function Index({ initialPosts }) {
  const { posts, setPosts } = useContext(PostsContext)

  useEffect(() => {
    setPosts(initialPosts)
  }, [initialPosts, setPosts])

  ...
}

Creating a Form to Add Post

Create a form to add posts from a webpage. Import the addPost function you created in context to submit the form data. Before uploading the file, you should include a preview of the uploaded photo. See more about handling file input in JavaScript. The toast in Chakra-UI is something that displays a message in a separate modal. In this component, you'll use a toast to show the success message.

/src/components/AddPost.js

import { useContext, useRef, useState } from 'react'
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  FormControl,
  FormLabel,
  Input,
  useDisclosure,
  useToast
} from '@chakra-ui/react'
import { PostsContext } from '../context/posts'

export const AddPost = ({ children }) => {
  const [image, setImage] = useState()
  const [caption, setCaption] = useState('')
  const [previewSource, setPreviewSource] = useState('')
  const [fileInputState, setFileInputState] = useState('')

  const { addPost } = useContext(PostsContext)

  const { isOpen, onOpen, onClose } = useDisclosure()
  const toast = useToast()
  const initialRef = useRef()

  const handleFileInput = (e) => {
    const file = e.target.files[0]
    setPreviewSource(URL.createObjectURL(file))
    setImage(file)
    setFileInputState(e.target.value)
  }

  const handleSubmit = (e) => {
    e.preventDefault()
    if (!image) return

    let formData = new FormData()
    formData.append('image', image)
    formData.append('caption', caption)

    addPost(formData)

    toast({
      title: 'Hurray!!! 🎉',
      description: 'Post added ✌',
      status: 'success',
      duration: 1500,
      isClosable: true
    })
    onClose()

    setCaption('')
    setFileInputState('')
    setPreviewSource('')
  }

  return (
    <>
      <Button
        fontWeight="medium"
        size="md"
        colorScheme="yellow"
        _active={{
          transform: 'scale(0.95)'
        }}
        onClick={onOpen}
      >
        {children}
      </Button>
      <Modal initialFocusRef={initialRef} isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader fontWeight="bold">Add Post</ModalHeader>
          <ModalCloseButton />
          <form onSubmit={handleSubmit}>
            <ModalBody pb={6}>
              <FormControl>
                <FormLabel>Photo</FormLabel>
                <input
                  type="file"
                  name="image"
                  ref={initialRef}
                  onChange={handleFileInput}
                  value={fileInputState}
                  required
                />
              </FormControl>

              {previewSource && (
                <img
                  src={previewSource}
                  alt="chosen"
                  height="300px"
                  width="300px"
                  style={{ margin: '15px auto' }}
                />
              )}

              <FormControl mt={4}>
                <FormLabel>Caption</FormLabel>
                <Input
                  placeholder="Caption goes here..."
                  type="text"
                  value={caption}
                  onChange={(e) => setCaption(e.target.value)}
                />
              </FormControl>
            </ModalBody>

            <ModalFooter>
              <Button mr={4} onClick={onClose}>
                Cancel
              </Button>
              <Button type="submit" colorScheme="yellow" mr={3}>
                Create
              </Button>
            </ModalFooter>
          </form>
        </ModalContent>
      </Modal>
    </>
  )
}

You'll be able to test the AddPost component after creating the navbar. Your Navbar will have a title on the left, Add post, login/logout and darkmode toggle buttons on the right. Go ahead and create a new file Navbar.js in /components folder.

/src/components/Navbar.js

import Link from 'next/link'
import { Button } from '@chakra-ui/button'
import { Flex, Text } from '@chakra-ui/layout'
import { DarkModeSwitch } from './DarkModeSwitch'
import { AddPost } from './AddPost'

const Navbar = () => {
  return (
    <Flex
      justifyContent="space-between"
      w="80%"
      flexDirection={['column', 'row']}
      m={4}
    >
      <Text mb={[4, 0]} textAlign="center" fontWeight="bold" fontSize="2xl">
        @Scrapbook
      </Text>
      <Flex justifyContent="space-between">
        <AddPost>Add Post</AddPost>
        <a href="/api/auth/login">
          <Button variant="solid" colorScheme="blue" mx={3} size="md">
            Login
          </Button>
        </a>
        <DarkModeSwitch />
      </Flex>
    </Flex>
  )
}

export default Navbar

At this point, you'll be able to add and display your scrapbook posts. Let's add authentication using Auth0.

Setup Authentication with Auth0

If you are already an Auth0 user login to your account or c reate a free one today. Create a new Regular web application. You'll use the auth0-next.js sdk to connect Auth0 with your application. Select Next.js when it asks what technology you're using. The following secrets are required to configure Auth0 with your Next.js application. Go to the Settings tab and add the new Auth0 secrets to the .env file.

/.env

...
AUTH0_SECRET=<any secret string of length 32>
AUTH0_BASE_URL='http://localhost:3000'<Your application base URL>
AUTH0_ISSUER_BASE_URL=<URL of your tenant domain>
AUTH0_CLIENT_ID=<Your application's client Id>
AUTH0_CLIENT_SECRET=<Your application's client secret>

If you scroll down a little in the Settings tab, you will find a section Application URIs. Add the following callback URLs. Add the base URL of your application if you're using codesandbox.

Allowed Callback URLs: http://localhost:3000/api/auth/callback, /api/auth/callback
Allowed Logout URLs: http://localhost:3000,

Create a new file auth/[...auth0].js inside the /pages/api directory. Any route you add inside brackets([]) will be treated as dynamic route.

/src/pages/api/auth/[...auth0].js

import { handleAuth } from '@auth0/nextjs-auth0'

export default handleAuth()

This generates required routes for authentication(/login, /logout and /callback). Under the hood, Auth0 manages the user's authentication state using React Context.
Wrap the inner components of the /pages/_app.js file with the UserProvider to use the useUser hook provided by Auth0 in the entire application.

/src/pages/_app.js

import { UserProvider } from '@auth0/nextjs-auth0'

function MyApp({ Component, pageProps }) {
  return (
    <UserProvider>
      <PostsProvider> ... </PostsProvider>
    </UserProvider>
  )
}

export default MyApp

Inside /index.js, you can now use the useUser hook to retrieve user information. Pass the user as a prop to the Navbar component to add login/logout functionality. Also, let's display You have to log in if the user is not logged in.

/src/pages/index.js

...
import { useUser } from '@auth0/nextjs-auth0'

export default function Index({ initialPosts }) {
  const { posts, setPosts } = useContext(PostsContext)
  const { user, error, isLoading } = useUser()

  useEffect(...)

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>{error.message}</div>

  return (
    <Flex flexDirection="column" justifyContent="center" alignItems="center">
      <Navbar user={user} />
      {user ? (
        <Flex w="100%" flexDirection="column" my={8}>
          {!posts.length ? (
            <Flex
              h={['30vh', '50vh']}
              w="100%"
              justifyContent="center"
              alignItems="center"
            >
              <Text fontSize={['2xl', '3xl']} opacity="0.2">
                No Posts Added
              </Text>
            </Flex>
          ) : (
            <Grid
              templateColumns={[
                'repeat(1, 1fr)',
                'repeat(2, 1fr)',
                'repeat(3, 1fr)'
              ]}
              gap={6}
              m="0 auto"
              w={['90%', '85%']}
            >
              {posts.map((post) => {
                console.log(post)
                return <Card post={post.fields} key={post.id} />
              })}
            </Grid>
          )}
        </Flex>
      ) : (
        <Flex
          h={['30vh', '50vh']}
          w="100%"
          justifyContent="center"
          alignItems="center"
        >
          <Text fontSize={['2xl', '3xl']} opacity="0.2">
            You have to login
          </Text>
        </Flex>
      )}
    </Flex>
  )
}

export async function getServerSideProps(context) { ... }

Update the Navbar.js for logging in and out a user. Also, you should make sure that only a logged-in user can add scrapbook posts.

/src/components/Navbar.js

import { Button } from '@chakra-ui/button'
import { Flex, Text } from '@chakra-ui/layout'
import { DarkModeSwitch } from './DarkModeSwitch'
import { AddPost } from './AddPost'

const Navbar = ({ user }) => {
  return (
    <Flex
      justifyContent="space-between"
      w="80vw"
      flexDirection={['column', 'row']}
      m={4}
    >
      <Text mb={[4, 0]} textAlign="center" fontWeight="bold" fontSize="2xl">
        @Scrapbook
      </Text>
      <Flex justifyContent="space-between">
        {user && <AddPost>Add Post</AddPost>}
        {user ? (
          <a href="/api/auth/logout">
            <Button variant="solid" colorScheme="blue" mx={4} size="md">
              Logout
            </Button>
          </a>
        ) : (
          <a href="/api/auth/login">
            <Button variant="solid" colorScheme="blue" mx={4} size="md">
              Login
            </Button>
          </a>
        )}
        <DarkModeSwitch />
      </Flex>
    </Flex>
  )
}

export default Navbar

Add Authentication to API Routes

Only authenticated users should be able to access the API. You must also associate each post with a specific user and display just the posts that belong to that person. To obtain user information, Auth0 provides withApiAuthRequired and getSession.

Update the API routes as follows:

/pages/api/getPost.js

// For retreving posts from Airtable
import { getSession, withApiAuthRequired } from '@auth0/nextjs-auth0'
import { table, minifyRecords } from '../../utils/Airtable'

export default withApiAuthRequired(async (req, res) => {
  const { user } = await getSession(req, res)

  try {
    const records = await table
      .select({ filterByFormula: `userId= '${user.sub}'` })
      .firstPage()
    const minfiedItems = minifyRecords(records)
    res.status(200).json(minfiedItems)
  } catch (error) {
    console.error(error)
    res.status(500).json({ msg: 'Something went wrong! 😕' })
  }
})

/pages/api/createPost.js

import nextConnect from 'next-connect'
import multer from 'multer'
import { table, minifyRecords } from '../../utils/Airtable'
import cloudinary from '../../utils/cloudinary'
import { getSession, withApiAuthRequired } from '@auth0/nextjs-auth0'

// multer config
const upload = multer({
  storage: multer.diskStorage({}),
  fileFilter: (req, file, cb) => {
    let ext = path.extname(file.originalname)
    if (ext !== '.jpg' && ext !== '.jpeg' && ext !== '.png') {
      cb(new Error('File type is not supported'), false)
      return
    }
    cb(null, true)
  }
})

const createPost = nextConnect({
  onError(error, req, res) {
    res.status(501).json({ error: error.message })
  }
})

// Adds the middleware to Next-Connect
createPost.use(upload.single('image'))

createPost.post(async (req, res) => {
  const { user } = getSession(req, res)
  // Uploading file to cloudinary
  const result = await cloudinary.uploader.upload(req.file.path)
  // Create a new record with required fields
  const post = {
    image: result.secure_url,
    caption: req.body.caption,
    cloudinaryId: result.public_id,
    userId: user.sub
  }

  // Create a record with the above fields in Airtable
  // the 'create' method accepts and returns an array of records
  const newRecords = await table.create([{ fields: post }])
  res.status(200).json(minifyRecords(newRecords)[0])
})

export default withApiAuthRequired(createPost)

export const config = {
  api: {
    bodyParser: false
  }
}

To access the protected API, you should include the user's context (such as Cookies) along with the request. Otherwise, you will receive the error message not_authenticated. Change the fetch request within getServerSideProps to include the user's session token as a cookie.

/src/pages/index.js

...

export async function getServerSideProps(context) {
  try {
    const res = await fetch('http://localhost:3000/api/posts', {
      headers: { Cookie: context.req.headers.cookie }
    })
    return {
      props: {
        initialPosts: await res.json()
      }
    ...
  }
}

That's all! Now you can see only the posts you have added. Without logging in, you won't be able to access the API routes. Check my app here. If you encounter any problems, try to solve them using this source code. If you prefer downloading, here's the entire codebase on GitHub.

Next Steps

In this tutorial, you have built a full-stack Jamstack app with media management and authentication. You can include some extra features like:

Updating and deleting the posts.
At present, you can only upload small images. Find a way to upload large images to your application.
You can perform media transformations with Cloudinary. Optimize your images before uploading to save space in your cloud.
Try to display the user profile and include a route to update or delete the user.
Try thinking of some more crazy ways to add additional functionality and share them with the community.

For media management, I prefer Cloudinary. They allow you to store all of your media on a separate cloud other than your database. Auth0 provides an extra layer of protection to your app. You can personalize the login/signup pages to reflect your brand. Airtable is another powerful tool that I like because of its spreadsheet-like user interface. Based on your requirements, you can use any database with Jamstack apps. As previously said, you can use Jamstack to develop full-stack apps by combining various technologies based on your needs.

Content created for the Hackmamba Jamstack Content Hackathon with Auth0 and Cloudinary.

DEV Community: Giridhar

How to Build a Full Stack Content Management System using Next.js, Xata, and Cloudinary

Prerequisites

What You Will Build

Technologies You Will Use

Getting Started

Starter Code

Connecting to Database

Creating the Table

Creating Product Data

Uploading Images to Cloudinary

Querying the Product Data

Generating Static Pages for Product Details

Updating the Product

Deleting a Product

Deploying to Netlify

Conclusion

Resources

Build a full-stack Jamstack Application

Tech Stack

Table of Contents

Getting Started

Connecting Airtable to Your App

Integrate Airtable with Next.js Serverless Functions

Setting up Cloudinary

Uploading Files to Cloudinary

Displaying Scrapbook Posts

Create React Context for Posts

Creating a Form to Add Post

Setup Authentication with Auth0

Add Authentication to API Routes

Next Steps