NextJS Templates
Building the Ticketing App with Next.js, Vercel and Back4App

30min
In this tutorial, we'll build a Ticketing System using Next.js with the app router, Back4App as the backend service, and Tailwind CSS for styling. The app allows users to create, update, view, and delete tickets, while utilizing Parse Server on Back4App for database management.
1. Prerequisites
Before starting, make sure you have:
Node.js installed on your machine (Node.js Installation Guide).
Back4App account (Sign up for free).
Vercel account for deployment (Sign up for Vercel).
2. Setting Up Back4App
Log in to your Back4App dashboard and create a new project.
Navigate to the Data Browser and create a new class called Ticket with the following schema:
Field Name
Type
title
String
description
String
category
String
priority
Number
progress
Number
status
String
createdAt
Date     (auto-generated)
updatedAt
Date     (auto-generated)
3. Setting Up the Frontend (Next.js)
3.1 Create a New Next.js Project
Run the following command to create a new Next.js project:
Bash
npx create-next-app@latest ticketing-app
cd ticketing-app
npx create-next-app@latest ticketing-app
cd ticketing-app
﻿
3.2 Install Dependencies
Install Tailwind CSS, Font Awesome, and Parse SDK for backend operations:
Bash
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
﻿
3.3 Set Up Tailwind CSS
Edit the tailwind.config.js file to configure the Tailwind CSS content paths:
JS
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
﻿
In styles/globals.css, add the Tailwind imports:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.4 Create the Project Structure
Following the structure provided, create the necessary directories and components.
Directory Structure:
Text
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
﻿
4. Setting Up Parse Client
In the /lib folder, create a parseClient.js file to configure the Parse SDK.
JS
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
import Parse from 'parse';

// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
Replace 'YOUR_APP_ID' and 'YOUR_JS_KEY' with your Back4App project credentials.
5. Creating the Key Components
5.1 TicketForm
This component will handle both creating and updating tickets.
In /components/TicketForm.jsx, create the following:
JS
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
﻿
5.2 TicketCard
This component will display individual ticket information.
In /components/TicketCard.jsx:
JS
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
﻿
5.3 DeleteBlock
A confirmation component for deleting tickets:
In /components/DeleteBlock.jsx:
JS
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
﻿
5.4 ProgressDisplay
This component shows the progress as a percentage bar:
In /components/ProgressDisplay.jsx:
JS
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
﻿
6. Pages and Routing
6.1 List of Tickets
In /app/page.js, display the list of tickets:
JS
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
﻿
6.2 Ticket Detail and Edit
In /app/tickets/[id]/page.js:
JS
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

  if (!ticket) return <div>Loading...</div>;

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

  if (!ticket) return <div>Loading...</div>;

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
﻿
7. Deploying to Vercel 
7.1: Create a Vercel Account
If you don’t already have a Vercel account, head over to vercel.com and create an account.
You can sign up with GitHub, GitLab, or Bitbucket. Vercel makes it easy to link your repository directly for deployments.
7.2: Push Your Code to GitHub
To deploy your app on Vercel, you need to have your project hosted on a version control platform like GitHub (or GitLab/Bitbucket).
If your project is not yet on GitHub, follow these steps:
Initialize git in your project directory:
bashCopy codegit init
Add your project to GitHub:
bashCopy codegit add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/YOUR_GITHUB_USERNAME/ticketing-app.git
git push -u origin main
7.3: Install Vercel CLI (Optional) 
If you prefer deploying directly from the command line, install the Vercel CLI globally:
bashCopy codenpm install -g vercel
Alternatively, you can deploy via Vercel's dashboard, which we’ll cover next.
7.4: Connect Your GitHub Repository to Vercel
Go to Vercel.
Click New Project.
Choose the Git repository that contains your Next.js project.
Configure your project:
Vercel will automatically detect that it's a Next.js project and apply the correct build settings.
Set the Root Directory to the project’s folder (if necessary).
7.5: Set Environment Variables 
You’ll need to configure your Back4App credentials and any other environment variables in Vercel.
In Vercel's Project Settings, go to the Environment Variables section.
Add the following environment variables:
7.6: Set up Parse Configuration in .env.local (Optional)
If you use local environment variables during development, make sure to create a .env.local file in your root project directory with the following variables:
bashCopy codeNEXT_PUBLIC_PARSE_APP_ID=YOUR_APP_ID
NEXT_PUBLIC_PARSE_JS_KEY=YOUR_JS_KEY
NEXT_PUBLIC_PARSE_SERVER_URL=https://parseapi.back4app.com
These environment variables will also be used by Vercel once they are set in the Vercel dashboard.
7.7: Configure Build Settings (Optional)
Ensure that Node.js version and build command are correctly configured (Vercel auto-detects this).
For Next.js apps, the default settings should be:
Build command: npm run build
Output directory: .next/
7.8: Deploy the Project
After you link your GitHub repository, Vercel will automatically trigger a build and deployment process.
You can view the status of your build in the Vercel dashboard.
7.9: Check Deployment Logs 
If any issues arise during the deployment, you can inspect the deployment logs to debug them.
7.10: Access Your Deployed App 
Once the deployment is successful, Vercel will provide you with a unique URL where your Next.js app is live. You can visit the URL to access your deployed Ticketing App.
For example: https://your-app-name.vercel.app/
8. Ensuring Smooth Deployment
Back4App credentials: Double-check that your Back4App environment variables are correctly set in both .env.local (for local development) and the Vercel dashboard (for production).
CORS (Cross-Origin Resource Sharing): Make sure that Back4App allows your Vercel URL in its CORS settings, which you can configure in the Back4App dashboard under Security.
Test your API: Before deploying, test your Back4App API interactions locally to ensure everything works smoothly.
9. Conclusion
With these steps, your Next.js Ticketing App should now be deployed on Vercel, using Back4App for the backend. This completes the full development cycle, from setting up Back4App, creating the frontend in Next.js, to deploying the app live on Vercel.
If you want to make updates, simply push changes to your GitHub repository, and Vercel will automatically trigger a new deployment.
Field Name	Type
title	String
description	String
category	String
priority	Number
progress	Number
status	String
createdAt	Date (auto-generated)
updatedAt	Date (auto-generated)
Updated 08 Oct 2024
Did this page help you?
Back4app Tutorials
Invoicing App Tutorial with Next.js, Vercel & Back4app