{"id":27777,"date":"2022-11-22T11:18:15","date_gmt":"2022-11-22T11:18:15","guid":{"rendered":"http:\/\/create-a-custom-meetup-banner-in-nextjs"},"modified":"2023-10-30T12:01:03","modified_gmt":"2023-10-30T19:01:03","slug":"create-a-custom-meetup-banner-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-custom-meetup-banner-in-nextjs\/","title":{"rendered":"Create a Custom Meetup Banner in Next.js"},"content":{"rendered":"

Banners are a powerful marketing tool with numerous advantages. Whether it\u2019s 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.<\/p>\n

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.<\/p>\n

This article describes how to build a custom meetup banner in Next.js.<\/p>\n

\nNext.js is a prominent React framework utilized for crafting full-stack web applications, encompassing both frontend and backend functionalities. It simplifies the tooling and configuration required for React, handling aspects like bundling and compiling to ensure a seamless development experience. Renowned for its static site generation capability, Next.js facilitates the creation of static web pages that are pre-rendered on build, cached, and delivered via a Content Delivery Network (CDN) for optimum loading speed. Moreover, it supports server-side rendering, another fast rendering method, to deliver a high-performance user experience. Notably, industry giants like TikTok, Hulu, and Nike have leveraged Next.js for their web development needs, attesting to its robust and scalable nature. According to a 2022 Statista report, both React and Next.js continue to rank among the most popular frameworks in the web development sphere.\n<\/p>\n

CodeSandbox and GitHub<\/h2>\n

The completed project is on CodeSandbox<\/a>. Fork it to get started quickly.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

The source code is on GitHub<\/a>.<\/p>\n

Prerequisites<\/h2>\n

Adequate knowledge of JavaScript and React.js is required for following along with this article. A Cloudinary account is also needed \u2014 create one here. Knowledge of Next.js is not required but is preferred.<\/p>\n

Getting Started with Next.js<\/h1>\n

Next.js<\/a> 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.<\/p>\n

Created by Vercel<\/a>, Next.js is open source and based on Node.js<\/a> and Babel<\/a> \u2014 and also integrates with React to create single-page apps.<\/p>\n

Project setup and installation<\/h2>\n

To create a new project, we\u2019ll run the following command in our terminal:<\/p>\n

    npx create-next-app <project-name<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Next, we\u2019ll navigate into the project directory and start the development server with the command below:<\/p>\n
    cd <project-name<\/span>><\/span> && npm run dev\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Next.js will load the project at http:\/\/localhost:3000<\/code> in our browser.<\/p>\n
Setting up an image in Cloudinary<\/h2>\n
After successfully creating an account, Cloudinary will redirect us to our account\u2019s dashboard page, where we can upload the banner image.<\/p>\n
\"image\"<\/p>\n
Click on the \u201cUpload\u201d button as shown above and select the image file to be uploaded.<\/p>\n
Building the banner component<\/h2>\n
With our project fully set up and configured, we can start building the meetup banner.\nFirst, we\u2019ll create two state variables called formData<\/code> and display<\/code> in the .\/pages\/index.js<\/code> file. formData<\/code> stores the value of the input elements anytime it changes, and display<\/code> provides a conditional rendering option to display the current banner details only if it is updated.<\/p>\n
    \/\/ .\/pages\/index.js<\/span>\n    \n    import<\/span> { useState } from<\/span> \"react\"<\/span>;\n    import<\/span> styles from<\/span> \"..\/styles\/Home.module.css\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n    const<\/span> [display, setDisplay] = useState(false<\/span>);\n      const<\/span> [formData, setFormData] = useState({\n        name<\/span>: \"\"<\/span>,\n        speaker<\/span>: \"\"<\/span>,\n        date<\/span>: \"\"<\/span>,\n        time<\/span>: \"\"<\/span>,\n        detail<\/span>: \"\"<\/span>,\n      });\n    \n      return<\/span> (\n        <div<\/span> className<\/span>={styles.container}<\/span>><\/span>\n          <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n          <h1<\/span> className<\/span>={styles.title}<\/span>><\/span>event meetup banner<\/h1<\/span>><\/span>\n            <div<\/span> className<\/span>=\"run\"<\/span>><\/span>\n              \/\/ input elements and button\n            <\/div<\/span>><\/span>\n          <\/main<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we\u2019ll create a set of input elements and a button in the .\/pages\/index.js<\/code> file. The input elements are to accept the input values \u2014 the banner details, while the button is to handle the functionality of the banner. We\u2019ll also bind the input values to the formData<\/code> state variable to store the banner details.<\/p>\n
    \/\/ .\/pages\/index.js\n    \n    <div<\/span> className<\/span>=\"details\"<\/span>><\/span>\n      <div<\/span> className<\/span>=\"label\"<\/span>><\/span>\n        <label<\/span>><\/span>event name<\/label<\/span>><\/span>\n        <input<\/span>\n           type<\/span>=\"text\"<\/span>\n           placeholder<\/span>=\"name\"<\/span>\n           value<\/span>={formData.name}<\/span>\n           onChange<\/span>={handleChange}<\/span>\n        \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span> className<\/span>=\"label\"<\/span>><\/span>\n        <label<\/span>><\/span>event speakers<\/label<\/span>><\/span>\n        <input<\/span>\n          type<\/span>=\"text\"<\/span>\n          placeholder<\/span>=\"speaker\"<\/span>\n          value<\/span>={formData.speaker}<\/span>\n           onChange<\/span>={handleChange}<\/span>\n         \/><\/span>\n       <\/div<\/span>><\/span>\n       <div<\/span> className<\/span>=\"label\"<\/span>><\/span>\n        <label<\/span>><\/span>date<\/label<\/span>><\/span>\n        <input<\/span>\n           type<\/span>=\"text\"<\/span>\n           value<\/span>={formData.date}<\/span>\n           onChange<\/span>={handleChange}<\/span>\n         \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span> className<\/span>=\"label\"<\/span>><\/span>\n         <label<\/span>><\/span>time<\/label<\/span>><\/span>\n         <input<\/span>\n           type<\/span>=\"number\"<\/span>\n           value<\/span>={formData.time}<\/span>\n           onChange<\/span>={handleChange}<\/span>\n         \/><\/span>\n       <\/div<\/span>><\/span>\n       <div<\/span> className<\/span>=\"label\"<\/span>><\/span>\n         <label<\/span>><\/span>Venue<\/label<\/span>><\/span>\n         <textarea<\/span>\n           className<\/span>=\"textarea\"<\/span>\n           type<\/span>=\"text\"<\/span>\n           placeholder<\/span>=\"type here\"<\/span>\n           value<\/span>={formData.detail}<\/span>\n           onChange<\/span>={handleChange}<\/span>\n          \/><\/span>\n          <button<\/span>><\/span>Generate banner<\/button<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Next, we\u2019ll assign an onChange<\/code> event listener to the input elements to update the values of formData<\/code> as the input value changes.<\/p>\n
      const handleChange = (e) => {\n        setFormData({ ...formData, [e.target.name]: e.target.value });\n        setDisplay(false);\n      };\n<\/code><\/pre>\n
Our meetup banner should look like this in our browser:<\/p>\n
\"image\"<\/p>\n
We also need to handle the functionality of the banner to display only when we click on the \u201cgenerate banner\u201d button. To do so, we assign the button to an event that updates the formData<\/code> with the current input values. The button also updates the display<\/code> variable to true<\/code> whenever we want to display the formData<\/code> values.<\/p>\n
     const<\/span> handleSubmit = (e<\/span>) =><\/span> {\n        e.preventDefault();\n        setFormData({ ...formData });\n        setDisplay(true<\/span>);\n      };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Displaying data values<\/h2>\n
Here, we\u2019ll integrate our Cloudinary image as the background of our banner. So, we\u2019ll head over to Cloudinary to get the URL of the image. Before getting the URL, we\u2019ll apply some transformations to our image in Cloudinary by clicking on the \u201cedit\u201d button. The transformations are to achieve a specific image height and width.<\/p>\n
<img<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/ugwutotheeshoes\/image\/upload\/c_scale,h_450,w_750\/v1649721585\/pawel-czerwinski-dgJT71cXlC4-unsplash_usrnmt.jpg\"<\/span> alt<\/span>=\"event image\"<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
The code snippet above renders an image with a width of 750px and a height of 450px.\nAfter applying these changes, our application will look similar to this:<\/p>\n
\"image\"<\/p>\n
Add the following code to display the formData<\/code> values if the display<\/code> variable is true<\/code>.<\/p>\n
    \/\/ .\/pages\/index.js\n    <div<\/span> className<\/span>=\"bad\"<\/span>><\/span>\n     <img<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/ugwutotheeshoes\/image\/upload\/c_scale,h_450,w_750\/v1649721585\/pawel-czerwinski-dgJT71cXlC4-unsplash_usrnmt.jpg\"<\/span> alt<\/span>=\"event image\"<\/span> \/><\/span>\n        <div<\/span> className<\/span>=\"view\"<\/span>><\/span>\n          <h1<\/span>><\/span>{display ? formData.name : \"\"}<\/h1<\/span>><\/span>\n          <h3<\/span>><\/span>{display ? `speaker: ${formData.speaker}` : \"\"}<\/h3<\/span>><\/span>\n          <p<\/span>><\/span> {display ? `date: ${formData.date}` : \"\"}<\/p<\/span>><\/span>\n          <p<\/span>><\/span> {display ? `time: ${formData.time}pm` : \"\"}<\/p<\/span>><\/span>\n          <p<\/span>><\/span>{display ? `venue: ${formData.detail}` : \"\"}<\/p<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We will also use some CSS styling in the styles\/global.css<\/code> file.<\/p>\n
    \/\/styles\/global.css<\/span>\n    .bad{\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      text-align: center;\n    }\n    .view{\n      position: absolute;\n      top: 45<\/span>%;\n      left: 50<\/span>%;\n      transform: translate(-50<\/span>%, -50<\/span>%);\n      color: #000;<\/span>\n    }    \n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
In the code block above, we did the following:<\/p>\n