home.js

export async function getServerSideProps() {
  //pre-existing component code
  const messageClassName = (id) =>
    id === Parse.User.current().id ? styles.myMessage : null;
  (
    <div className={styles.container}>
      <div className={styles.messagesContainer}>
        <ul ref={listRef}>
          {messages &&
            messages.map((message, id) => (
              <div
                key={message.id}
                className={messageClassName(message.get("senderId"))}
              >
                <li className={messageClassName(message.get("senderId"))}>
                  <span className={messageClassName(message.get("senderId"))}>
                    {message.get('senderName')}
                  </span>
                  <p>{message.get("content")}</p>
                </li>
              </div>
            ))}
        </ul>
      </div>
      <form onSubmit={handleSubmitMessage} className={styles.actionsContainer}>
        <input value={inputMessage} onChange={handleupdateInput} />
        <button>send message</button>
      </form>
    </div>
  );
}