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