NewtとNext.jsを利用して、問い合わせフォームを作成する

.env.local

1NEXT_PUBLIC_NEWT_FORM_ENDPOINT=https://xxxxx.form.newt.so/v1/xxxxx

pages/contact.tsx

1export default function Page() {
2  return (
3    <>
4      <h1>Contact us</h1>
5      <form action={process.env.NEXT_PUBLIC_NEWT_FORM_ENDPOINT} method="post">
6        <label htmlFor="name">Name</label>
7        <input id="name" name="name" />
8        <label htmlFor="email">Email</label>
9        <input id="email" name="email" type="email" />
10        <label htmlFor="message">Message</label>
11        <textarea id="message" name="message"></textarea>
12        <button type="submit">Submit</button>
13      </form>
14    </>
15  )
16}

app/contact/react-hook-form/page.tsx

1'use client'
2import { useForm } from 'react-hook-form'
3
4type FormValues = {
5  name: string
6  email: string
7  message: string
8}
9
10export default function Page() {
11  const {
12    register,
13    handleSubmit,
14    formState: { errors },
15  } = useForm<FormValues>({ mode: 'onChange' })
16
17  const onSubmit = handleSubmit(async (data) => {
18    const formData = new FormData()
19    Object.entries(data).forEach(([key, value]) => {
20      formData.append(key, value)
21    })
22
23    await fetch(process.env.NEXT_PUBLIC_NEWT_FORM_ENDPOINT ?? '', {
24      method: 'POST',
25      body: formData,
26      headers: {
27        Accept: 'application/json',
28      },
29    })
30  })
31
32  return (
33    <>
34      <h1>Contact us</h1>
35      <form onSubmit={onSubmit}>
36        <label htmlFor="name">Name*</label>
37        <input
38          id="name"
39          {...register('name', { required: 'Name is required' })}
40          aria-describedby="error-name-required"
41        />
42        {errors?.name && (
43          <span id="error-name-required" aria-live="assertive">
44            {errors.name.message}
45          </span>
46        )}
47        <label htmlFor="email">Email</label>
48        <input id="email" {...register('email')} />
49        <label htmlFor="message">Message</label>
50        <textarea id="message" {...register('message')}></textarea>
51        <button type="submit">Submit</button>
52      </form>
53    </>
54  )
55}

app/thanks/page.tsx

1'use client'
2import { useRouter } from 'next/navigation'
3
4export default function Thanks() {
5  const router = useRouter()
6
7  return (
8    <>
9      <h1>Thank you!</h1>
10      <div>
11        <button type="button" onClick={() => router.back()}>
12          Back to Previous Page
13        </button>
14      </div>
15    </>
16  )
17}

app/error/page.tsx

1'use client'
2import { useRouter } from 'next/navigation'
3
4export default function Error() {
5  const router = useRouter()
6
7  return (
8    <>
9      <h1>Error!</h1>
10      <div>
11        <button type="button" onClick={() => router.back()}>
12          Back to Previous Page
13        </button>
14      </div>
15    </>
16  )
17}

app/contact/react-hook-form/page.tsx

1'use client'
2import { useRouter } from 'next/navigation'
3import { useForm } from 'react-hook-form'
4
5type FormValues = {
6  name: string
7  email: string
8  message: string
9}
10
11export default function Page() {
12  const router = useRouter()
13  const {
14    register,
15    handleSubmit,
16    formState: { errors },
17  } = useForm<FormValues>({ mode: 'onChange' })
18
19  const onSubmit = handleSubmit(async (data) => {
20    const formData = new FormData()
21    Object.entries(data).forEach(([key, value]) => {
22      formData.append(key, value)
23    })
24
25    await fetch(process.env.NEXT_PUBLIC_NEWT_FORM_ENDPOINT ?? '', {
26      method: 'POST',
27      body: formData,
28      headers: {
29        Accept: 'application/json',
30      },
31    })
32    try {
33      const response = await fetch(
34        process.env.NEXT_PUBLIC_NEWT_FORM_ENDPOINT ?? '',
35        {
36          method: 'POST',
37          body: formData,
38          headers: {
39            Accept: 'application/json',
40          },
41        },
42      )
43
44      if (response.ok) {
45        router.push('/thanks')
46      } else {
47        router.push('/error')
48      }
49    } catch (err) {
50      router.push('/error')
51    }
52  })
53
54  return (
55    （省略）
56  )
57}

.env.local

1NEXT_PUBLIC_NEWT_FORM_ENDPOINT=https://xxxxx.form.newt.so/v1/xxxxx
2NEXT_PUBLIC_RECAPTCHA_SITE_KEY=xxxxxxxxxxxxxxx

app/contact/recaptcha/layout.tsx

1'use client'
2import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'
3
4export default function Layout({ children }: { children: React.ReactNode }) {
5  return (
6    <GoogleReCaptchaProvider
7      reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY ?? ''}
8      language="ja"
9    >
10      {children}
11    </GoogleReCaptchaProvider>
12  )
13}

app/contact/recaptcha/page.tsx

1'use client'
2import { useRouter } from 'next/navigation'
3import { useGoogleReCaptcha } from 'react-google-recaptcha-v3' // 1
4import { useForm } from 'react-hook-form'
5
6type FormValues = {
7  name: string
8  email: string
9  message: string
10  googleReCaptchaToken: string
11}
12
13export default function Page() {
14  const router = useRouter()
15  const {
16    register,
17    handleSubmit,
18    formState: { errors },
19  } = useForm<FormValues>({ mode: 'onChange' })
20  const { executeRecaptcha } = useGoogleReCaptcha()
21
22  const onSubmit = handleSubmit(async (data) => {
23    if (!executeRecaptcha) return // 2
24    const token = await executeRecaptcha('submit')
25    data.googleReCaptchaToken = token // 3
26
27    const formData = new FormData()
28    Object.entries(data).forEach(([key, value]) => {
29      formData.append(key, value)
30    })
31
32    try {
33      const response = await fetch(
34        process.env.NEXT_PUBLIC_NEWT_FORM_ENDPOINT ?? '',
35        {
36          method: 'POST',
37          body: formData,
38          headers: {
39            Accept: 'application/json',
40          },
41        },
42      )
43
44      if (response.ok) {
45        router.push('/thanks')
46      } else {
47        router.push('/error')
48      }
49    } catch (err) {
50      router.push('/error')
51    }
52  })
53
54  return (
55    <>
56      <h1>Contact us</h1>
57      <form onSubmit={onSubmit}>
58        <label htmlFor="name">Name*</label>
59        <input
60          id="name"
61          {...register('name', { required: 'Name is required' })}
62          aria-describedby="error-name-required"
63        />
64        {errors?.name && (
65          <span id="error-name-required" aria-live="assertive">
66            {errors.name.message}
67          </span>
68        )}
69        <label htmlFor="email">Email</label>
70        <input id="email" {...register('email')} />
71        <label htmlFor="message">Message</label>
72        <textarea id="message" {...register('message')}></textarea>
73        <button type="submit">Submit</button>
74      </form>
75    </>
76  )
77}