Talking Drupal #458 - Drupal & Next.js

Today we are talking about Next.js, what it is, and how to integrate it with Drupal with guest John Albin Wilkins. We’ll also cover Next.js Webform as our module of the week.

For show notes visit: www.talkingDrupal.com/458

Topics

• What is Next.js
• What kind of server do you need
• How is it used on the web
• Does it only work on react based systems
• Why would someone want to integrate with Drupal
• When changes are made in the content how do you update the app
• On the module page there are a lot of references to Preview, is this something Next does well
• What is server side rendering
• How does Next work with menus and views
• Any preference on the api for json api vs graphql
• Performance
• Editorial experience
• Responsive images
• Will Drupal ever ship with a headless front end
• Winner of the TPOTM

Resources

• Next.js
• Next.js Wikipedia
• Next.js Webform Tutorial
• Example Next.js template to render an arbitrary webform
• Decoupled Menus Initiative
• FormDazzle
• Trival Patch of the Month
• https://www.drupal.org/project/drupal/issues/258089
• Flexinode

Guests

John Albin Wilkins - john.albin.net JohnAlbin

Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Baddý Sonja Breidert - 1xINTERNET baddysonja

MOTW Correspondent

Martin Anderson-Clutz - mandclu.com mandclu

• Brief description:
  • Have you ever wanted to build a webform in Drupal and have the corresponding Next.js template automatically created for you? There’s a Next.js library for that.
• Module name/project name:
  • Next.js Webform
• Brief history
  • How old: created in Aug 2022 by Lauri Timmanee (lauriii), who listeners may know as the Drupal Core Product Manager, and one of the people leading the Starshot initiative
  • Versions available: 1.1.1
• Maintainership
  • Test coverage
  • Documentation - Lengthy README and a tutorial on the Acquia Dev Portal
  • Number of open issues: 17 open issues, 3 of which are bugs
• Usage stats:
  • 2,246 weekly downloads according to npmjs.com
• Module features and usage
  • Using this library does require some setup on the Drupal side, including installing the Webform and Webform REST modules. There’s also an extra patch to install if you want to use any autocomplete fields, and some configuration needed for both the REST resources that will be used to exchange data, and the permissions for the account that will be used to retrieve and submit data
  • Out of the box, the library supports over 40 webform components, but you can also provide custom elements if you need something additional. The library also supports conditional logic, so fields can show or hide in the Next.js front end based on conditions defined in your Drupal backend
  • The library also provides front-end validation for email confirmation, date list, and datetime fields, but back end validation is also processed for every submission
  • There is a crowded field of headless CMS competitors, but I thought this library is a good example of the extra power and flexibility you get by using a robust, open source CMS like Drupal as the back end in your headless architecture