Rendering Webform in Next.js

This is an example that leverages the Next.js Webform library for rendering forms that are built by using the Drupal Webform module. The framework can render simple Webforms out-of-the-box. You can extend the functionality to support advanced features in Webform. Acquia recommends that you leverage this approach for rendering Webforms.

For an easy setup, Acquia recommends that you use the Drupal Webform REST module.

1. Download the Webform and Webform REST modules.

2. On Webform REST, apply the patch from this issue to add the Webform Autocomplete Options endpoint.

   This step is only required if you use autocomplete fields.

3. Enable the following REST resources on /admin/config/services/rest:
   • Webform Submit
   • Webform Autocomplete Options
   • Webform Elements
   • Webform Submission
4. Set permissions: /admin/people/permissions#module-rest for RESTful Web Services.
5. Create a contact webform if you do not have the form: /admin/structure/webform.

6. Run the development server:

   npm run dev
   # or
   yarn dev
   

7. Open http://localhost:3000 with your browser to see the result.

8. Start editing the page by modifying pages/index.tsx.

   The system automatically updates the page as you edit the file.

For more information about Next.js Webform and Next.js for Drupal Starter Kits, see

• Next.js Webform (Framework for rendering Drupal Webform forms in Next.js)
• Next.js (React front-end framework)
• Next.js for Drupal Starter Kits (Tools for integrating Next.js with Drupal Starter Kits)
• Next.js for Drupal (Tools for integrating Next.js with Drupal)