---
title: "Rendering Webform in Next.js"
date: "2024-02-14T06:18:38+00:00"
summary: "Learn how to seamlessly render Drupal Webforms in Next.js with our step-by-step guide. Discover best practices, module recommendations, and essential setup instructions for developers."
image:
type: "page"
url: "/drupal-starter-kits/rendering-webform-nextjs"
id: "b183bc35-5829-47fb-9012-fce86f1cc5c5"
---

Rebranding notice!

Acquia announces rebranding of its “Acquia CMS” offering, which includes a collection of Drupal modules. “Acquia CMS” is now referred to as “Drupal Starter Kits”.

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](https://www.drupal.org/project/webform_rest) module.

1.  Download the Webform and Webform REST modules.
2.  On Webform REST, apply the patch from [this issue](https://www.drupal.org/project/webform_rest/issues/3317762) 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](https://www.drupal.org/project/next_webform) (Framework for rendering Drupal Webform forms in Next.js)
*   [Next.js](https://nextjs.org/) (React front-end framework)
*   [Next.js for Drupal Starter Kits](https://github.com/acquia/next-acms) (Tools for integrating Next.js with Drupal Starter Kits)
*   [Next.js for Drupal](https://next-drupal.org/) (Tools for integrating Next.js with Drupal)