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

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

The Pete and Sebastian Show 427