How to implement form submission with Next.js

Next.js is a widely used and open-source framework in web development. It's a go-to framework in terms of both server-side and client-side rendering. Next provides configurations for React applications and adds its own features on top of the structure as well.

Note: Next.js offers vast features and can be learned through building applications here.

A great way to learn about a new Javascript technology is to try and implement a form using static techniques e.g., HTML, and CSS, and then applying some kind of validation on it.

Moving on with this intent, we will be building an easy-to-understand form in Next.js and allow submission and validation checks on the submitted input. Let's dive right in!

Next.js architecture
Next.js architecture

Setting up a Next.js project

Before we move on to the code, let's learn how to get our project up and running first. The procedure for a Next.js project is quite similar to that of React in terms of both commands and syntax.

First, we're going to open up a directory and initialize our project in the same directory.

npx create-next-app .

Then, the terminal will prompt us with a few settings that we'll say either "Yes" or "No" to, according to our project scope and requirements.

Terminal configurations
Terminal configurations

The project structure should be similar to the given structure.

We can now run our application using this command.

npm run dev

Form submission through Next.js

To make a form, we can use React or Next.js elements and then make a few validation functions. The validation will be taken care of through our application's backend i.e. the server.

Next.js Form

Here's how we render a form in Next.js.

"use client";
import React, { useState } from 'react';
import './globals.css';
export default function Home() {
  
  const [myEmail, setMyEmail] = useState('');
  const [myPassword, setMyPassword] = useState('');
  const [confirmMyPassword, setMyConfirmPassword] = useState('');
  
  return (
    <div className="flex flex-col text-white items-center justify-center h-screen bg-gray-900">
      <p className = 'pb-14 font-bold text-2xl'>Instructions for the form</p>
      <p>1. Make sure your password contains atleast 6 characters</p>
      <p className = 'pb-24'>2. Your email must contain the domain "educative.io"</p>
      <form className="rounded-lg w-full max-w-md p-8 bg-gray-700">
        <label htmlFor="email" className="text-gray-200">
          Add your Email here
        </label>
        <input
          type="text"
          placeholder="e.g. i@educative.io"
          required
          value={myEmail}
          onChange={(e) => setMyEmail(e.target.value)}
          name="email"
          className="w-full px-4 py-2 mb-4 bg-gray-900 rounded-md border border-gray-400 text-gray-100 focus:outline-none focus:border-gray-500"
        />
        <label htmlFor="password" className="text-gray-200">
        Add your Password here
        </label>
        <input
          type="password"
          placeholder="e.g. *********"
          required
          value={myPassword}
          onChange={(e) => setMyPassword(e.target.value)}
          name="password"
          className="w-full px-4 py-2 mb-4 bg-gray-900 border border-gray-400 rounded-md text-gray-100 focus:outline-none focus:border-gray-500"
        />
        <label htmlFor="confirmPassword" className="text-gray-200">
        Confirm Password here
        </label>
        <input
          type="password"
          placeholder="e.g. *********"
          required
          value={confirmMyPassword}
          onChange={(e) => setMyConfirmPassword(e.target.value)}
          name="confirmPassword"
          className="w-full px-4 py-2 mb-4 bg-gray-900 border border-gray-400 rounded-md text-gray-100 focus:outline-none focus:border-gray-500"
        />
        <button
          type="submit"
          onClick={handleMySubmission}
          className="w-full py-2 px-4 bg-gray-800 rounded-md text-gray-100 hover:bg-gray-600 focus:outline-none"
        >
          Submit Form in Next.js!
        </button>
      </form>
    </div>
  );
}
Home component rendering a form

Now let's assume we have the following requirements:

  1. Each email should contain "educative.io".

  2. The password length should be greater than 6.

  3. The contents of the password and confirmPassword fields should match.

handleMySubmission(e) in form

To implement submission so that the backend is triggered, let's code up a handleMySubmission function.

const handleMySubmission = (e) => {
    e.preventDefault();
 
    fetch('http://localhost:4000/api/submitForm', { 
      method: 'POST',
      body: JSON.stringify({ email: myEmail, password: myPassword, confirmPassword: confirmMyPassword }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => {
        if (response.status === 200) {
          setMyEmail("");
          setMyPassword("");
          setMyConfirmPassword("");
        }
        return response.json();
      })
      .then((data) => {
        alert(JSON.stringify(data.message)); 
      })
      .catch((error) => {
        console.error(error); 
        alert('An error occurred. Please try again.'); 
      });
  };
Submission function that calls backend API endpoints

Server set up for the backend

A safer and widely accepted way of validation of forms is from a backend being set up for our application. Therefore, we will not be handling these checks in our handleMySubmission method.

A server is pretty easy to set up with Express, so let's quickly do that before bringing our application together.

const express = require('express');
var cors = require('cors')
const app = express();
const bodyParser = require('body-parser');
const port = 4000; 
app.use(cors());
app.use(bodyParser.json());
app.post('/api/submitForm', (req, res) => {
  const { email, password, confirmPassword } = req.body;
  if (password.length < 6) {
    res.status(400).json({ message: 'Your password length must be greater than 6' });
    return;
  }
  if (password !== confirmPassword) {
    res.status(400).json({ message: 'Password and confirm password fields do not match' });
    return;
  }
  if (!email.includes('@educative.io')) {
    res.status(400).json({ message: 'Email domain does not match' });
    return;
  }
  res.status(200).json({ message: 'Form submitted successfully' });
});
app.listen(port, () => {
  console.log(`API server is running on port ${port}`);
});
Express server for handling form submission
Server and client connection
Server and client connection

Full stack application

All that we've learned in this answer can help us make a complete and ready-to-run full-stack Next.js and Express project from scratch. We can now submit a form and see its validation in action.

Let's join the pieces together and run our application!

 (F   (n00 (-– ¾F(  $]ºº]$  òÿÿÿÿò  8àÿÿÿÿÿÿÿÿà8âÿÿÿÿÿÿÿÿÿÿâ¡ÿÿÿÿÿÿÿÿÿÿÿÿ¡#ôÿÿOOOÿ®®®ÿ«««ÿ«««ÿ«««ÿ«««ÿ­­­ÿgggÿÿÿô#Yÿÿÿÿíííÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿ555ÿÿÿÿY»ÿÿÿÿkkkÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŽŽŽÿÿÿÿÿ»»ÿÿÿÿ			ÿÍÍÍÿÿÿÿÿÿÿÿÿäääÿÿÿÿÿÿ»YÿÿÿÿÿJJJÿýýýÿÿÿÿÿkkkÿÿÿÿÿÿY#ôÿÿÿÿÿ¶¶¶ÿÕÕÕÿ			ÿÿÿÿÿô#¡ÿÿÿÿÿ111ÿDDDÿÿÿÿÿÿ¡âÿÿÿÿÿÿÿÿÿÿâ8àÿÿÿÿÿÿÿÿà8  òÿÿÿÿò  $]ºº]$( @ ,UèèU,*…Òùÿÿÿÿÿÿù҅*–óÿÿÿÿÿÿÿÿÿÿÿÿó–QáÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿáQrûÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿûrrÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿrOûÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿûOäÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿã—ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ—(õÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿô'†ÿÿÿÿÿÿ888ÿ‹‹‹ÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿ‰‰‰ÿ___ÿÿÿÿÿÿÿ†ÔÿÿÿÿÿÿÿîîîÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿSSSÿÿÿÿÿÿÿÔ+úÿÿÿÿÿÿÿhhhÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®®®ÿÿÿÿÿÿÿÿú+TÿÿÿÿÿÿÿÿÿËËËÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿôôôÿ,,,ÿÿÿÿÿÿÿÿÿT‚ÿÿÿÿÿÿÿÿÿGGGÿýýýÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿéÿÿÿÿÿÿÿÿÿÿ­­­ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿäääÿÿÿÿÿÿÿÿÿÿÿééÿÿÿÿÿÿÿÿÿÿ+++ÿóóóÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿjjjÿÿÿÿÿÿÿÿÿÿÿéÿÿÿÿÿÿÿÿÿÿÿ‹‹‹ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÌÌÌÿÿÿÿÿÿÿÿÿÿÿÿ‚TÿÿÿÿÿÿÿÿÿÿÿÿãããÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿIIIÿÿÿÿÿÿÿÿÿÿÿÿT+úÿÿÿÿÿÿÿÿÿÿÿhhhÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¯¯¯ÿÿÿÿÿÿÿÿÿÿÿÿú+ÔÿÿÿÿÿÿÿÿÿÿÿÿËËËÿÿÿÿÿÿÿÿÿôôôÿ,,,ÿÿÿÿÿÿÿÿÿÿÿÿÔ†ÿÿÿÿÿÿÿÿÿÿÿÿGGGÿýýýÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ†'ôÿÿÿÿÿÿÿÿÿÿÿÿ±±±ÿìììÿÿÿÿÿÿÿÿÿÿÿÿÿõ(—ÿÿÿÿÿÿÿÿÿÿÿÿ333ÿ___ÿÿÿÿÿÿÿÿÿÿÿÿÿ—ãÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿäOûÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿûOrÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿrrûÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿûrQáÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿáQ–óÿÿÿÿÿÿÿÿÿÿÿÿó–*…Òùÿÿÿÿÿÿù҅*,UèèU,(0` -	(Lj³ø÷³jK(	V ØøÿÿÿÿÿÿÿÿøØ U%‹áÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿá‹&‹ïÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿï‹QÜÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÜRŠþÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿþŠ­ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ­¸ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¸®ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®ŠÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŠPýÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýOßÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿß‹ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ‹#ñÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿñ#Œÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ‹äÿÿÿÿÿÿÿÿÿ$$$ÿhhhÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿPPPÿÿÿÿÿÿÿÿÿÿäUÿÿÿÿÿÿÿÿÿÿÿëëëÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿsssÿÿÿÿÿÿÿÿÿÿÿU¡ÿÿÿÿÿÿÿÿÿÿÿeeeÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÌÌÌÿÿÿÿÿÿÿÿÿÿÿÿ¡	ÚÿÿÿÿÿÿÿÿÿÿÿÿÉÉÉÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿHHHÿÿÿÿÿÿÿÿÿÿÿÿÚ	(ùÿÿÿÿÿÿÿÿÿÿÿÿEEEÿüüüÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®®®ÿÿÿÿÿÿÿÿÿÿÿÿÿø(Kÿÿÿÿÿÿÿÿÿÿÿÿÿÿªªªÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿôôôÿ,,,ÿÿÿÿÿÿÿÿÿÿÿÿÿÿLjÿÿÿÿÿÿÿÿÿÿÿÿÿÿ)))ÿòòòÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŒŒŒÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿj´ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿˆˆˆÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿãããÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ³øÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿáááÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿiiiÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿøøÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿeeeÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿËËËÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿø³ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÉÉÉÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿHHHÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ´jÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿEEEÿüüüÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®®®ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿjLÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿªªªÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿôôôÿ,,,ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿK(øÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ)))ÿòòòÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŒŒŒÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿù(	ÚÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿˆˆˆÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿãããÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÚ	¡ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿáááÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿiiiÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¡UÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿeeeÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÌÌÌÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿUäÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÉÉÉÿÿÿÿÿÿÿÿÿýýýÿHHHÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿä‹ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿEEEÿüüüÿÿÿÿÿ®®®ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŒ#ñÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¬¬¬ÿûûûÿ,,,ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿñ#‹ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ222ÿ}}}ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ‹ßÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿßOýÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýPŠÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŠ®ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®¸ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¸­ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ­ŠþÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿþŠRÜÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÜQ‹ïÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿï‹&‹áÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿá‹%U ØøÿÿÿÿÿÿÿÿøØ V	(Kj³÷ø³jL(	‰PNG


IHDR\r¨fsRGB®Îé8eXIfMM*‡i  D"8sIDATxí]	°ՙn”]<QVA–èÄh$	ÊNŒŽ13*ˆq°Âdªč©I¡ˆ˜D“L2“ª(Î(Ԙ2ÖęÑG	‹Áq_@å±ˆà†Šxțï»Ð¾{o÷½½ÓýýUß{}»OŸå;çÿûôùÏ9Ý‘d®(Dg Ð8	èôNº]€î@ hx¥?v
ÀNà3à=`;ð6ð.ð&°àuâà  ±”6‰P©Ð½€Á@ÿàRÓPùiZqÊ^DNãà€wp¼
Ø¼ÐXÐhИHg@ÀÌ
:Ùâ|ð5` p"@À'¼É²™s{
ëpü*ð2Àލ…Ä dÒ¯Œ–È|(0ø
0à“>Kò
³xX¬6IJȤC|?$KENØ}ϓ|ŠÂòµáàöh $	2 Ù|/§Â.Nz’#¼ÃW€eÀ
à5€ã
’ˆÜ¶ˆúà;Ày•¾ ñgàs©h^IÄÈDL(¢;¸8 ÒHjg€cH|x 1 ËR"Œa€ïôӁ•GÁÙ@…è9`/`%0è
HÄ@jð½~,° ÛK
Ÿ,t).ÎèI‘ˆDèT¦Oû)~º°Vìu$b 誛
ÐU%¥7“ƒ¨›ù_É$b 8Aç×À€ßøJö3` 510wQñ?¤øvrðÑá:ü2þKÄ@ ¤øv*{%#í‚AZ€咁^(õÏ=ñ³g\ãÀWƒÛ€É!:àß,`à6ýÏ643:@’c.Fٟ¤ðùä€u?Ð<'áÝ€ƒ€”_܏vp: É8Q¾›
IñŁ·
p{3ÎóÐkHÈ¢ŒG¡ž¼•®cñѼ
<62&‹
×2uCÁÿàÚò敭ßâ¤Tø3Ú
½ê
€›…;î¼”ªd/~m€½.ø’XÆ@{äw.°ð«d]G•Ú{lKÜàEbœÿý(P©RuMüTÛC›ÒÚÃ
Àdäï])¿Œ_Lmà=Äû=@bœÍ÷K€ÛGUkÙ^œUÓØÆØÖøš)1€È»gÕT¢ÂŠ¯°m`9Ú\Ú®³ÀQþÍ@ØÊÔýⰖ6ð:ڞÕ^›w¬òï¸E—D¤Áç	ü5°àºëÄFÐ,ßÜ
ðX"Òd€mð<€nB~òì@´¸÷µt×tx‹»
ü;ÚfÞ>ñ“ªíI8µˆ»¿8Ó¸C1Ûª$B¸•§e†©Ý+þ’jl«ÜEZÃÇ& ©ÊS:â:Š6°möë´ÿ\G1¥ç`¢¨Å!“nl»lÃƊÉ^€Q`í·@OcÙSÆÄ@e¸Í·º¹ç¤qbªp•ÿãS†Ä@upšº±FÀD@å¿Г¿º†¦Ðæ2@#À¹ÆõL3£A’”$H2Ç_hž¶FH#rq(íÿOàDƒò¤¬ˆ¨àrunGOWaêbŠ&–SgDñ3ÀEDçto§*Ǥšú¡Ä9kŠÝ~)¿•¡,$Âx¿RŸ1˜vàK áÀ9€D䍁U(ðw®&LEÒäê©»€S)¹é3ÐY8x8$.i€(íŒÄK¬ŀYœŽìðaÈ]­—´À4”ôǀ	c‰“®Å@3¸fà€ó•4ÆÆ¢„ÿ
Ð/*bàüþÇþ˜$!I€~‡Ø7ÉB*-1`	o Ÿº	‘$»àÇ¡D‹¾‰”L‰ˆûàòßêJ"’äÀOQ¢Ë)•ö2@#Ðx4‰"$e¨ø·Iö8’àOiˆ8ø"ݼGäÞ8[xÄt<ñ.´´7&‚m&؎R^‹³tq÷ؕá.¾§ÅYÅ-2Ƚd§ûã*_Üà&d|j\™W¼b ãôGùö«â*gœ¯£‘釁ÄF4ã"IñŠ؃´/b1q€NÈðãÀY€Dˆp¼ŒÛ9îãpÑ}w\¯ó‘Ô¤£“Ó1 j`€èOûŸî­xK=€ÑHñ÷÷A“ˆ1
Ÿ#¾
D:U8jÀõýtù©ë$b bžA||ØU¼Q¿ü26%ªÌ)1 Šè…_
Àꢳ!~DÙàºæ•¿à+b >A´Ü:]ÑE$ˆ£50òGDhRÑtèÐÁéÝ»wRÉ)ðPÇ‘èn$‘ 3ÜÖë@bS§Nu–,Yâ´jÕʲœç:»¡ôÜ;ÀáÀßó@£`Ç|ã–-[)“'OVýÙՆ©sFxÚ®“âÛ¥øn}͛7¯ üü³~ýúƺº:»ŒÀQ—©J_¤ÎUKj8–q0xðàÆ;v4̞=[õhW=¾	Ýë	¤&·!e5Ë8hÑ¢EãÝwß]¤üüñá‡6öïß_õiW}þSZÚ?	¿/`Ÿ;vlã¾}ûŽ2<±hÑ"»À§ÐA¸ÜÕX,ã mÛ¶+V¬(©ü<¹wïÞÆ#F¨^íª×;“ÖþaHðcûà”)SÊ*¿{aùòåpÊØc89(Ñ^€žþö4Ž&E¦ÛoÆ
®žWü/· uÆ=±^€žþ*?{k^·_EíÇÅúúz¹íªgö†UI-‹è{WU*
œ:pû9.tÚ·o(/ݺus>ûì3ç‰'ž^Rg€ßäڞGâÌI_D®‘»žåÜ~~½¹­{
øúÙ?N0‘7½SêØ.ƍ׸ÿ~?}/y]nA;êØ£‹³ã2]ñFOB2C?·_I­÷œ”[Ð:°:Ú=#ÀOzKé-㠈ÛÏ£ï%å´®Ý?jÐþIÀ®†PÛ¯¤æ{NÊ-hUÝÿt•:™œƒ˜øõ,â ·ŸG×KÊ-hUÛç¢cƒhP7 ÿÎ¡Â˜Á@µn?¿\Ó-¸k×.¹ýˆ2ã:õú ð`ÙáF„Û=ý-á V·_ÉG¿ç¤Ü‚VéÝõ}¢0WIù­ªøFºýÊ­öóèsM‡rZÕ8pJ¸QÜ*@OK8ëöó³
rZ¥Ôݖa,ßûwËØSéW^y¥Ÿ‡¾.· 5íat7ÔØݏ¤üÖTv#Ý~7n­àA"¸üòËÕ+´£WøèpMÂÅ/ªhK8ˆÒíçgä´F/^„·«ÅŒÀM{eì¨èR›|ú)qØë7Ýt“æ?8'ീKùíP~ºýî¹çž°ú\õýrÚÑ> Ç·UkØeP÷ß|ë^xÇéöó³
‹/V/Àüvòô™¯ôå„ä¢*×pâvûù¹­Ð¾ÊŸ]JûË}óˆk8(•ˆÎÅÇÀĉÑ£GǗ€OÌmÚ´q,X oúð”òe.â˜^ ¡QxÐÓßp’tûùõä4^_ƒN—{à†¾øÅyÄ2†s¤ÛÏÏÐ-عsgµsÛÌÐiêv‘”Z
8
!~PJ?Œc€«ýîºë®À›|Æ]®ܽ{·³zõ긓Rüµ1pnãÔàzïí¥º¼tlpû9³fÍrºvíjT殿þzß4*OÊLã‹~•øÑçžԕ3˜ƒ4Ý~~¯r­;ÔmêxYŒ+üÀ€€¡¤íöó3r­;Ômêx“4à÷Å:7]ՁqLš4)U·Ÿ!rú1”êuê6¿ìÕ$Í
À7›®èÀ8ºwïî̙3Ǹ|5Ï>?î\zé¥ÍOë·œë͆×ðø,ïE›ÅÀŒ3œš•©2¹¹å–[œººº2Wu:E¾‚´›¼^p.H1cJºtû]}õÕB˜uéÔSOu®ºŠ»ÉIc€Ož¥òÄ%ƒ
ÆAZ«ýüüü®kµ ‘ºD?Ç5Þ@Q×À
 ÿé3Àwê+®¸"ýŒT™ÎSÀžUÞ¥à13Àî?ûâ5M'݋úŸ>pûþZµj•~fjÈ
׈×¡Ô‚n©¦±>×ðÿi5D¤[bf íÕ~a‹'·`Xc¹Ÿã-¼1ók¢›½ÿāI«ýüÞ÷ý®kµ QºÅ¯|ókßMËé(92È@’t°ÉíçÇ݂X-èLדa€úN4€“qܞ'$f0@·
@V„nA›Ü˜Yá½L9:â|/^sÇú—	¨Ó)0`êj¿°T\wÝuZ-–Äèî¨\ 	@Ñ:¦±cítûùœ{È-èÇRb×û1%×ôI,Y%T‘ÛÝ~‡‹rú1”ØõÂCŸ€,¼$–´*ˀé«ýÊf<à¹0zþŽ¥èhÕFü„û¦·Ÿ«ý| 8Z-èCRü—¹Tg×ÐHRf€‹glYí–ª¹sçÊ-–Äp÷Ó'+ŽÃèî¶mµ_ؒgÍÍ–îçC¿{ô	òÃ’”ȪÛϏΙ3gÊ-èGR|×¹7`G€Þñ¥¡˜ƒ0U·Ÿ_ÙµZЏ¡Ø¯ŸD )À±ó\>¬»ýʗüйýŠõzN–¤Ä@ÖÝ~~´Ê-èÇP¬×{rs€¿´@¬<—Žœ›|.]ºÔ¸|”Îm|gûõëç¬_¿Þyå•WâKD1—bàM½”¢%¡s\“·Ÿ¥rú1Ëõnì\–ƒ„"-ÉÝ`.4æÛ~%3™àI}[0A²$µ“=-Ò>BH"G®Û^r„­<ÂEBGÝiÚ%”˜’9Ì@^Ý~~
@«ýŠüú1Ü쀆@’tû-[¶ÌèÏ{%@CÙ$ðmAgüøñΚ5kʆхÈøœŠ/双OÿˆlßäÓ¿„áBÐ@.X°À±uäp¥Oüî6œ—x²9MPn¿`ß·o_§¾¾^nÁ`t…
¥§(úª»™ƒ\rûùsÆAÒyóæéۂþT…¡@h
ƒE0lØ0çÎ;ïtڵӘkƸN ¡¡ÁYµjUà
S#ì|^㽺- |¢ÝpÃ
N—.…­ØÞ¥`×^{­zLñ6ƒƒ4ŸÄ›†bç¨öe—]&"ªd€sΜ9UÞ¥àU0ð!
ÀÁ*nPÐ*`—ÿæ›oÖ¨v•¼¹Ái8GåþÔÿhh ØmœŠÍËÀäɓsÏ=×{JÇU0ÀՂóçÏwZ·æþ’ˆø”ƒ€ì›ö8bEzôèá,Y²Dïþ![CŸ>}œ7:k×®
“noÆÀfö>jvR?#b€ƒXˆ(¶üFÃAT¾FÕÕióêˆ[Á{ì°zvÄç>º¡C‡Êía+[0B2Dµœ=€íG~ë(
øĺñÆÕõ‚LO×\sÜ‚>"8|‹`[)
&Lp8ø'‰–ö䌔Óí4oGeÎ#£ÛÀlْ_\“D̀܂‘2ZØl¢Üi´9ŽŒ
täȑ9f Þ¢Ë-¿œ¼‹=€‡YÌyˆn?uQã¯}XͬÍsAïi>=ŒÐ1æ=RÉí+à +
­Ü‚¡¸.2šŠKì«·ßôéÓCƢۃ20hÐ ‡Ë«%53À5@…MA¹%˜¦×Ì£ãÈ킼·j[õä9Î;¸û_(¯ú§¿µ0ÀÕ~rûÕÂ\¸{ômÁPüÜÿ®x#TT9¾™n?¾Êí—N# á•×¥&î}׬¯)
ÝTVL¯!¸ßÔjÁªë`ïp
ß8@RrûUAVŒA嬚Ü=¸ã-Þå€÷pLHª`@n¿*Ȋ1¨Ü‚U“Ëõ?}w
]ìH2@·ß´iÓ†V°¸ [Ë¯%àôÿ‚ëß58±)Э
T`€›|rZbZ-¸.Ö!da+@×ðÎçߞó€Zígf[0p½¼æ†ôžä¤ I´Égr¸$· o%PÇ_rCy
ÀVœ|ß½ ÿ¥à"mòYšÎÊ-è[lÚÄkxAãø“Û¯9]¢[pÒ¤IåȨ¬pP“ÇÏkŠºFeِÌÈígHEødƒnAm"Z–$Žõ5}„›‚zå8üéô2røX›|– ÅàSÜ»w¯³råJƒs™JÖ~T›fþz{ÌÍ«÷xÐj?jµàQ•EÝnòðjsÀùÁ|Gxзý<dXt(·àQ•EÝ.¬p¯47Üð)÷¢þ;…Ïysµ_«V­D‡…È-XTiÔí¢ý?›†~¼è–œÿÛÏî ·`Qý=Vô?šòú^à
€‚¹ºý–.]ª|XÞ
ômÁB~€¿?ŠÆøJõÞD —·äüÜ~Ùhrê‘óÿ©ÛERªÀ…A݀óŠBæìÝ~wÜq‡Ó¾}ûœ•<›Å•[й5ûdóÚ-Õ`˜5?KqÝ~l4’ì0@·à)§œ’/I‚®(¼œà‡Ø‹ü…¥nÎê9¹ý²Y³4èœ!˜Cو2ח*w9ÀÀGKݐõsî&Ÿrûe³¦súé¶? 6Ù8JÊ|(òuwO䴁d°&K)‡nA¾Ê?RšÒn@7,·º8Á=‘õÿrûe½†•nÁM›69k×òM7óÂéý·J•´R€]†e¥nÊê9¹ý²Z³Ååâ /?នo>ŒÒ󕾤”rzrÒÀ óó`åöóV{ö»uëæ4448«V­Êra÷ p³îõQRZ”<{ädK.F9•½#~Tâ¾ûîs.¾øâìN%*Ë
ÀðáÝuë8G&“²¥ì/W:*x%á{Ã}@¦
»‚lõõõNc#çAIòÀÀ±Ç›õiÞ÷£Ë*?ëدÀ0}€g€ãùC"ĀpÛ¯³€Šßû¨4薒ҏ(bÀ8€_QùY” €áîr7'€—ˆ`·ÿî ùj¸6à… *Œ©3ÀWögƒä"¨àl¢
¡Âˆ1:ì±Sg}%È  	¹¥P?÷„þ‹1`›£¯ÉYÐãâŽ"‹‚Dª0b@¤ÆÝö”Ÿ9¬¦Àðý¾[tá‰F1À‡ôp`kÐ\UÓ`œÜRø·A#W81 e`)RÛZMŠÕö÷€[uæ‰F0ð	rq.ÀՁ¥Ú#^ð=C"Ā9P'«R~f½–ï
pn€zdC"Òe ¦§?³\K€÷½¨@&$b }jzú3Ûµöx/{èÄ1 Ra€#ÿ|÷çƟUK­=&Ä^€æTM¹n‘2À9ÿ5)?s¦Àû{O'ó‡DˆDà’ßo[kMÕoK0¿xÿŒÜTd‚_@]b ræ ÆGÃĶÀ´;«€¯ò‡DˆDàêÜ1ÀgaRÛ`ÚÜ'`0ˆÂ  ‰>\ë/ù„ñ½fÐùƒøñ÷„ŽÅ€ˆß!fn÷Z¢|bŸ†ÜðU .t®åटÑÀÚrª9Å+€›ý‘­€±î	ýb rnEŒDk”=æé8àÀÙü!b RžClã€PÞEÙ`¼ÜŒK†'~ß@‰ Ë}*°!`ø@Á¢6Lô
 ;À	$b@DÃÀ?#šÈgÞFý
àµV”ˆ1ŽvýÇ;ÃEsôÝQ¹›ÇÌ=É®ö4¿ ßb@TÅÀn„þ!¹ò3q¼0^ÊV€ãc‰µ1ðܶ´¶[ýïŠëÀM¹=8IˆÝ‰Õ1@Ú…@Cu··`N¸oÀãWJĀÆWúÑåÇe÷±Iœ¯n¦¹Nàmீ¸ÆÜ´ô_d(Ä4`E܅I°¯œ"̵Ë1 *3ð+\þEå Ñ\MâÀÍ)g	rÁ¦
»Œè¿8š>õ¿pô?vIÒ°0€Ç€~ü!b ˆ­øÅ$'Ó%"I¿“¿ŽRýÀi1 Ž0°‡?S~&ÔÓr…ä’Æ€¤{ nô_˜ÄÀÈÌLà?’ÎT€eäÔƎÀ7ùC"rÎÀOQ~"qIË° O8?$b §܋rÿ#@×_â’v¼J̙‚£/¹é3ð'dá/ÈÖ÷W[¤¤›ço'Nü
ðlóú-2ÎÛüå@jÊO~Óî0”À2`HÄ@Æ؄òÐ+–ª¤ÝpOB®ÞuOè¿È(lãS€Ô•Ÿü¦9Èô½ò~ðcß:x/èXd„.ðù°Æ”ò˜dÈÉVày@F$H2ŕŸïü+M*•i€Ül8O@F$H2Á•Ÿå®2­4&r´
POÀ´Ö¢üÔ€ûä7NùYS
ó¶ øÀYƒ1`ðã;ÿJS3n² g['‘@W@"la`32Ên?'ûHB2p
îhām€mu ‰“×j@F@˜ÜV ²­Z!¦¿xIä”ÉÿH®y™Ñ±)üù>ÀåZ!6ºà”aÎ`äþ‚¦ÌdDV$9f€ëù	pM¿6»I¨!LG:\LdrwPyË~ýPá§%Ôæ•L3Æá7çTKÑÄAm€mo|³6©Ÿ	3Ðé-ÒhJ3¿¼?Ž67 á¶yr¶”"€ûþàgÈÎ4.$±1À÷ý_¼[*Š¸&¸¤˜S/õdq´Îìãä‰ÁCÞâhŠ3¿¼>Š6Ŷ%±€¶Èã\€#´RZq¦
ð=lK|ŔXÆÀXäWSˆej5/¡ýÐÓ$±˜:äýv@½‚ †€Î8Ð×
d„1(‡z2~Fà)´ùö3¢ô͋ÁÞÀl€®C¿† ëùâè#´‰›í=².\Lt? %ÑN$9b %Ê:àþƒ2ùä€u	 É1|-˜	ldòÁ÷œœt$b À@?ü¥·@† »FàcÔïρ^€D”d€[9ýࠐzÙà€ŠÏ:
HÄ@ ¾ŒP2v)~ ¦®@•àüïŸz5°Ç|€úÒ¿R«ÖµªàÁ|`# W39؂ºá<î"-±0Àï\<ìdÒå€uÀoGLz1œGp°à—e’倯d‹.øj
HÄ@jôFÊ3€•@ c{s<ÿùJ&	É@‹÷ëöb¸ÙÀw‹ ²§ ©nÁµàvðœ²û< ‰ˆ€ˆˆ,M;œû*p>p!0hHüà{=•ž»ðüxà]IÄÈDLh™èÚâ<'¡Œh8Ç@V Á#ïã˜Jÿ°àfûIŒÈÄHn…¨ûãWŸ}àNÆt[uò$Ÿ¢°›§åþ
@’ 2	’]&)Ž†#€3ˆ“,	=%¯TôÕÀkÀ&à I‰€”ˆ÷I¶®Ó³ðÙ[8	è	´L–]È]tïTðgõÀ6à-@b2U†OVºã:

A?€¯
}.iî|	àxCœÂ÷rvßw;ÎÀ#ê>éi8_b82†WP€ìÑõ聎{'n¯áÓ8ðz;€Æ¤yÝŽsŸœÃ@¥¦¼P¡·o|ÂSùih$3ðÿ@ß¹jìŠáIEND®B`‚

Client code explanation

Our only concern is the form that is defined in page.js. The content in the page.js file is the content that gets rendered when running a Next.js application.

  • Line 1: The "use client" line tells the Next.js application that this is client code.

  • Lines 7–9: We define the states for myEmail, myPassword, and confirmPassword.

  • Line 11: Our handleMySubmission function is defined which sends data to the backend for validation.

  • Lines 14–22: The fetch method is called to send a POST request to the server containing the email, password, and confirmPassword.

  • Lines 23–40: Once the data is received, a chain of then functions is implemented. If the response is 200, that means the form was validated and the fields are then reset. On each outcome, an alert is generated to show the user either a success or error message.

  • Line 49: A form tag is used to implement a form and its styling is done through Tailwind CSS using class names provided by this framework.

  • Lines 55–63: An input tag with the type email is rendered for our email input and is bound to the myEmail state.

  • Lines 69–77: An input tag with the type password is rendered for our "password input" and is bound to the myPassword state.

  • Lines 83–91: An input tag with the type password is rendered for our "confirm password" input and is bound to the confirmMyPassword state.

  • Lines 93–99: Lastly, we render a button with the submit type. This button implements an event when it is clicked through the onClick attribute and calls the handleMySubmission method.

Note: The fetch call should include the same port number as the one defined in our server e.g. http://localhost:4000/.

Server code explanation

Our server is defined in the apiServer.js file. Let's have a walkthrough of this file to better understand the underlying working.

  • Lines 1–4: We import express to set up an Express server. cors is required so that the front-end and back-end can communicate easily. body-parser is used to destructure elements sent from the front-end request.

  • Line 6: The port is set to 4000, but any available port can be used instead.

  • Lines 12–14: The app defines a POST request that takes a request req and response res as parameters. The POST request from our front-end is directed here. We receive the parameters of email, password, and confirmPassword from our Next.js front-end.

  • Lines 16–20: If the password length is lesser than 6, we send a status of 400 along with an error message.

  • Lines 21–25: If the password and confirmPassword are not equal, we send a status of 400 along with an error message.

  • Lines 26–30: If the email does not include the domain "educative.io", we send a status of 400 along with an error message.

  • Line 32: Finally, if all checks are passed, we send a status of 200 and return a message of success "Form submitted successfully".

  • Lines 35–38: The defined app starts listening on port 4000 when this file is run using node apiServer.js.

Note: To run such a project, make sure you run your server first on one terminal using node apiServer.js. Then, run the front-end on another terminal using npm run dev.

4 cases of output generation

Here's a visual representation of the form we created in our Next.js project. It contains three inputs and based on these inputs sends appropriate messages from the back-end.

widget

  1. The password and confirm password fields have different values.

widget

  1. The email does not contain the domain "educative.io".

widget

  1. Our password length is lesser than 6 characters.

widget

  1. Correct input results in the form being submitted and reset.

widget

This marks the completion of our project. That was not too hard, and just a basic server and form rendering allowed us to accomplish this!

Note: You can experiment with the form and run the application to see your changes.

Pros of using Next.js

We can think of Next.js as a game changer when paired with React in a few areas.

  1. Superior search engine optimization.

  2. Shorter load times.

  3. Support for TypeScript and CSS.

  4. More accessible URLs.

  5. Prerendering and image optimization.

A brief recap

All in all, forms are made using similar techniques and tags as in React, and a method can be attached to the submit button to handle submissions. This method may converse with a back-end to perform validation checks as well.

Do you know Next.js’ forms well enough?

Q

Why is a POST method used instead of GET in form submissions?

A)

Only POST can handle submissions and reply back to queries.

B)

GET is just for retrieving information.

C)

POST offers a safer way of handling input. It does not append user input e.g. passwords in the URL.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved