# Next.js Integration

Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React based web applications.

You can integrate Getform to the sites developed with Next.js to handle the backend of your static forms easily.

# Create a new Next.js site

If you have a NextJS site already setup and running, you can skip this step. If you are setting up your site from scratch, you can run the following commands to start setting up your NextJS site.

$ yarn create next-app

at this point, you will be asked to give a name to your app. In this example, it will be "my-first-next-app".

$ cd my-first-next-app
$ yarn dev

NextJS will start a hot-reloading development environment that is accessible by default at http://localhost:3000/.

# Add a Contact Section to your Next.js site

Create a new js file and name it as contact.js file under pages directory, change its content with the following code block:

import React, { useState } from "react";
import styles from '../styles/Home.module.css'

export default function App() {
  const [query, setQuery] = useState({
    name: "",
    email: ""
  });

  // Update inputs value
  const handleParam = () => (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setQuery((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };
  // Form Submit function
  const formSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData();
    Object.entries(query).forEach(([key, value]) => {
      formData.append(key, value);
    });
    fetch("https://getform.io/{your-form-endpoint}", {
      method: "POST",
      body: formData
    }).then(() => setQuery({ name: "", email: "", message: "" }));
  };
  return (
    <div className="App">
      <h1>NextJS form using Getform.io</h1>
      <form onSubmit={formSubmit}>
        <div>
          <label>Name</label>
          <input
            type="text"
            name="name"
            required
            placeholder="Name"
            className="form-control"
            value={query.name}
            onChange={handleParam()}
          />
        </div>
        <div>
          <label>Email</label>
          <input
            type="email"
            name="email"
            required
            placeholder="Email"
            className="form-control"
            value={query.email}
            onChange={handleParam()}
          />
        </div>
        <div>
          <label>Message</label>
          <input
            type="text"
            name="message"
            required
            placeholder="Message"
            className="form-control"
            value={query.message}
            onChange={handleParam()}
          />
        </div>
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

# Run your Next.js site locally to finalize setup

Run the following command to see your NextJS form in action at localhost:3000/contact/:

$ yarn dev

That's it! Your Next.js site is now running Getform.

← Nuxt.js →