Banners are a powerful marketing tool with numerous advantages. Whether it’s preparing an event, attending a trade fair, or considering on-premise marketing, an outstanding banner is a necessity to set yourself apart from the competition.

Physical event banners are one of the most effective kinds of outdoor advertising, so naturally digital event banners make a huge impression and convey the right message.

This article describes how to build a custom meetup banner in Next.js.

CodeSandbox and GitHub

The completed project is on CodeSandbox. Fork it to get started quickly.

The source code is on GitHub.

Prerequisites

Adequate knowledge of JavaScript and React.js is required for following along with this article. A Cloudinary account is also needed — create one here. Knowledge of Next.js is not required but is preferred.

Getting Started with Next.js

Next.js is a React-based framework with functionalities like pre-rendering, automatic code-splitting for faster page loads, and API routes to build API endpoints with serverless functions for back-end features.

Created by Vercel, Next.js is open source and based on Node.js and Babel — and also integrates with React to create single-page apps.

Project setup and installation

To create a new project, we’ll run the following command in our terminal:

1npx create-next-app <project-name>

Next, we’ll navigate into the project directory and start the development server with the command below:

1cd <project-name> && npm run dev

Next.js will load the project at http://localhost:3000 in our browser.

Setting up an image in Cloudinary

After successfully creating an account, Cloudinary will redirect us to our account's dashboard page, where we can upload the banner image.

Click on the “Upload” button as shown above and select the image file to be uploaded.

Building the banner component

With our project fully set up and configured, we can start building the meetup banner. First, we’ll create two state variables called formData and display in the ./pages/index.js file. formData stores the value of the input elements anytime it changes, and display provides a conditional rendering option to display the current banner details only if it is updated.

1// ./pages/index.js
2    
3    import { useState } from "react";
4    import styles from "../styles/Home.module.css";
5    
6    export default function Home() {
7    const [display, setDisplay] = useState(false);
8      const [formData, setFormData] = useState({
9        name: "",
10        speaker: "",
11        date: "",
12        time: "",
13        detail: "",
14      });
15    
16      return (
17        <div className={styles.container}>
18          <main className={styles.main}>
19          <h1 className={styles.title}>event meetup banner</h1>
20            <div className="run">
21              // input elements and button
22            </div>
23          </main>
24        </div>

Next, we’ll create a set of input elements and a button in the ./pages/index.js file. The input elements are to accept the input values — the banner details, while the button is to handle the functionality of the banner. We’ll also bind the input values to the formData state variable to store the banner details.

1// ./pages/index.js
2    
3    <div className="details">
4      <div className="label">
5        <label>event name</label>
6        <input
7           type="text"
8           placeholder="name"
9           value={formData.name}
10           onChange={handleChange}
11        />
12      </div>
13      <div className="label">
14        <label>event speakers</label>
15        <input
16          type="text"
17          placeholder="speaker"
18          value={formData.speaker}
19           onChange={handleChange}
20         />
21       </div>
22       <div className="label">
23        <label>date</label>
24        <input
25           type="text"
26           value={formData.date}
27           onChange={handleChange}
28         />
29      </div>
30      <div className="label">
31         <label>time</label>
32         <input
33           type="number"
34           value={formData.time}
35           onChange={handleChange}
36         />
37       </div>
38       <div className="label">
39         <label>Venue</label>
40         <textarea
41           className="textarea"
42           type="text"
43           placeholder="type here"
44           value={formData.detail}
45           onChange={handleChange}
46          />
47          <button>Generate banner</button>
48        </div>
49    </div>

Next, we’ll assign an onChange event listener to the input elements to update the values of formData as the input value changes.

1const handleChange = (e) => {
2        setFormData({ ...formData, [e.target.name]: e.target.value });
3        setDisplay(false);
4      };

Our meetup banner should look like this in our browser:

We also need to handle the functionality of the banner to display only when we click on the “generate banner” button. To do so, we assign the button to an event that updates the formData with the current input values. The button also updates the display variable to true whenever we want to display the formData values.

1const handleSubmit = (e) => {
2        e.preventDefault();
3        setFormData({ ...formData });
4        setDisplay(true);
5      };

Displaying data values

Here, we’ll integrate our Cloudinary image as the background of our banner. So, we’ll head over to Cloudinary to get the URL of the image. Before getting the URL, we’ll apply some transformations to our image in Cloudinary by clicking on the “edit” button. The transformations are to achieve a specific image height and width.

1<img src="https://res.cloudinary.com/ugwutotheeshoes/image/upload/c_scale,h_450,w_750/v1649721585/pawel-czerwinski-dgJT71cXlC4-unsplash_usrnmt.jpg" alt="event image" />

The code snippet above renders an image with a width of 750px and a height of 450px. After applying these changes, our application will look similar to this:

Add the following code to display the formData values if the display variable is true.

1// ./pages/index.js
2    <div className="bad">
3     <img src="https://res.cloudinary.com/ugwutotheeshoes/image/upload/c_scale,h_450,w_750/v1649721585/pawel-czerwinski-dgJT71cXlC4-unsplash_usrnmt.jpg" alt="event image" />
4        <div className="view">
5          <h1>{display ? formData.name : ""}</h1>
6          <h3>{display ? `speaker: ${formData.speaker}` : ""}</h3>
7          <p> {display ? `date: ${formData.date}` : ""}</p>
8          <p> {display ? `time: ${formData.time}pm` : ""}</p>
9          <p>{display ? `venue: ${formData.detail}` : ""}</p>
10        </div>
11    </div>

We will also use some CSS styling in the styles/global.css file.

1//styles/global.css
2    .bad{
3      position: relative;
4      display: flex;
5      justify-content: center;
6      align-items: center;
7      text-align: center;
8    }
9    .view{
10      position: absolute;
11      top: 45%;
12      left: 50%;
13      transform: translate(-50%, -50%);
14      color: #000;
15    }

In the code block above, we did the following:

Positioned the child element relative to its parent element.
Aligned the banner content in the middle of the banner.

Our application should now look like this:

Conclusion

In this article, we learned how to build a meetup banner with Next.js.

Create a Custom Meetup Banner in Next.js