newsletter.jsx

// pages/newsletter.js

function NewsletterPage() {
	const [email, setEmail] = useState('')
	const [error, setError] = useState(false)
	const [isSubmitted, setIsSubmitted] = useState(false)
	const [isSubmitting, setIsSubmitting] = useState(false)
	const [name, setName] = useState('')

	const handleEmailChange = useCallback(({ target }) => {
		setEmail(target.value)
	}, [setEmail])
	const handleNameChange = useCallback(({ target }) => {
		setName(target.value)
	}, [setName])

	const handleSubmit = useCallback(async () => {
		setIsSubmitting(true)

		try {
			await fetch('/api/newsletter/signup', {
				body: JSON.stringify({
					email,
					name,
				}),
				method: 'POST',
			})
			setIsSubmitted(true)
		} catch (error) {
			setError(error)
		}

		setIsSubmitting(false)
	}, [])

	if (isSubmitted) {
		return (
			<div>Success!</div>
		)
	}

	return (
		<form onSubmit={handleSubmit}>
			{Boolean(error) && (
				<div>{error.message}</div>
			)}

			<input 
				onChange={handleNameChange}
				type="text"
				value={name} />

			<input 
				onChange={handleEmailChange}
				type="email"
				value={email} />

			<button 
				disabled={isSubmitting || isSubmitted}
				type="submit">Submit</button>
		</form>
	)
}

signup.js

// pages/api/newsletter/signup.js

export default async function(request, response) => {
	if (req.method !== 'POST') {
		return response.status(405).end()
	}

	const { 
		email, 
		name,
	} = request.body

	try {
		await functionThatSendsDataToTheNewsletterService()
	} catch (error) {
		response.status(500).end()
	}
	
	response.status(200).end()
}