To fetch and send data to the Strapi API, we’re using HTTP methods:

• GET - Retrieve and read data
• POST - Create new data content
• PUT - Update data ****
• DELETE - Delete data

POST (Form Submission)

1. Add imports

// 1 Imports
import axios from 'axios';
import { useState } from 'react';
import { useRouter } from 'next/router';

type Props = {};

const NewComponent = (props: Props) => {
	return ()
}
export default NewComponent

2. Set the state of the desired inputs

// 1 Imports
import axios from 'axios';
import { useState } from 'react';
import { useRouter } from 'next/router';

type Props = {};

const NewComponent = (props: Props) => {
	// 2 Assigns empty states to inputs
	const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');

	return ()
}
export default NewComponent

3. Declare router const

// 1 Imports
import axios from 'axios';
import { useState } from 'react';
import { useRouter } from 'next/router';

type Props = {};

const NewComponent = (props: Props) => {
	// 2 Assigns empty states to inputs
	const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');
	
	// 3 Assign useRouter() function to router const
	const router = useRouter();

	return ()
}
export default NewComponent

4. Add function to handle submission

// 1 Imports
import axios from 'axios';
import { useState } from 'react';
import { useRouter } from 'next/router';

type Props = {};

const NewComponent = (props: Props) => {
	// 2 Assigns empty states to inputs
	const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');
	
	// 3 Assign useRouter() function to router const
	const router = useRouter();

	// 4 Submission handler 
	const handleSubmit = async (e: any) => {
		e.preventDefault();
		// Declares new const containing submission data into reqBody
    const reqBody = {
      data: {
				input1: input1,
        input2: input2,
			},
		};
		// Declares new const res containing axios POST response with reqBody
		const res = await axios.post(
      // Hosted Strapi endpoint for input
      '<https://tranquil-journey-42623.herokuapp.com/api/new-inputs>',
      reqBody
    );
		// If the response returns ok, refreshes the page and alerts user
		if (res.statusText === 'OK') {
      // Refreshes page to '/' endpoint (index)
      router.push('/');
      alert('Form submitted! Heck ya!');
    }
  };

	return ()
}
export default NewComponent;

5. Add handleSubmit function to form.

// 1 Imports
import axios from 'axios';
import { useState } from 'react';
import { useRouter } from 'next/router';

type Props = {};

const NewComponent = (props: Props) => {
	// 2 Assigns empty states to inputs
	const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');
	
	// 3 Assign useRouter() function to router const
	const router = useRouter();

	// 4 Submission handler 
	const handleSubmit = async (e: any) => {
		e.preventDefault();
		// Declares new const containing submission data into reqBody
    const reqBody = {
      data: {
				input1: input1,
        input2: input2,
			},
		};
		// Declares new const res containing axios POST response with reqBody
		const res = await axios.post(
      // Hosted Strapi endpoint for input
      '<https://tranquil-journey-42623.herokuapp.com/api/new-inputs>',
      reqBody
    );
		// If the response returns ok, refreshes the page and alerts user
		if (res.statusText === 'OK') {
      // Refreshes page to '/' endpoint (index)
      router.push('/');
      alert('Form submitted! Heck ya!');
    }
  };

	return (
		// 5 On submission event, form will execute handleSubmit
		<form className="flex flex-col" onSubmit={(e) => handleSubmit(e)}>
		</form>
	)
}
export default NewComponent;

6. Add handleChange function to input.

// 1 Imports
import axios from 'axios';
import { useState } from 'react';
import { useRouter } from 'next/router';

type Props = {};

const NewComponent = (props: Props) => {
	// 2 Assigns empty states to inputs
	const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');
	
	// 3 Assign useRouter() function to router const
	const router = useRouter();

	// 4 Submission handler 
	const handleSubmit = async (e: any) => {
		e.preventDefault();
		// Declares new const containing submission data into reqBody
    const reqBody = {
      data: {
				input1: input1,
        input2: input2,
			},
		};
		// Declares new const res containing axios POST response with reqBody
		const res = await axios.post(
      // Hosted Strapi endpoint for input
      '<https://tranquil-journey-42623.herokuapp.com/api/new-inputs>',
      reqBody
    );
		// If the response returns ok, refreshes the page and alerts user
		if (res.statusText === 'OK') {
      // Refreshes page to '/' endpoint (index)
      router.push('/');
      alert('Form submitted! Heck ya!');
    }
  };

	return (
		// 5 On submission event, form will execute handleSubmit
		<form onSubmit={(e) => handleSubmit(e)}>
			<div >
		    <label>Label:</label>
				{/* 6 When value is changed, setInput1 function will update the state of input1 */}
        <input
	        type="text"
          onChange={(e) => setInput1(e.target.value)}
          required
         />
       </div>
		</form>
	)
}
export default NewComponent;