NextJS with Drupal - DrupalJam Utrecht 2023

One of the many futures of Drupal may be headless, and there is so much more than just using Drupal to serve React/Next.

Many paradigms can be used, but we should be aware of the traps we may fall into if we dive headlessly.

More information: https://macmladen.com/talks/2023/next-drupal

Transcript

1. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 1
2. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 APOLLO 11: 
 THE MOON LANDING AND 1202 and very brie fl y some musings about 
 what the hack have Next.js to do with Drupal?! 2 Mladen Đurić 
 @MacMladen
3. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 3
4. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 1202: APOLLO GUIDANCE COMPUTER HAD CRASHED Armstrong had had his wings clipped over Korea; he’d bounced an airplane off the upper atmosphere; he’d rescued Gemini 8 from a violent zero-gravity spin. Now he was piloting a malfunctioning spacecraft to touch down on an alien world. Just 40 seconds after the computer’s fi nal restart, he slowed the lander’s forward momentum, then rotated the legs toward the surface. As the engine kicked up a blinding cloud of dust, Aldrin read aloud a steady stream of fi gures from the console. With almost no fuel to spare, the lander dropped, in slow motion, to kiss the surface upright, and the particles of moon dust hung suspended in the sunlight until the gentle lunar gravity pulled them back to rest. 4
5. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 5
6. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 NEXT.JS WITH DRUPAL Mladen Đurić 
 @MacMladen 6
7. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 $ whoami 7 A very boring, incompetent guy MLADEN ĐURIĆ a.k.a MacMladen
8. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 I’ve been in IT since the age of mainframes, 8th year of UNIX epoch. 8
9. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 I started with Z80 assembly 9
10. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 I really enjoyed hard core C 10
11. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 11 As soon as I started learning to code I was so fascinated and wanted to share what I learned. I was hardly into secondary school when I organised fi rst computer club and gave fi rst BASIC course. It was around 1982. In 2016 I started a Professional Web Development School ]{oder.
12. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 NEXT.JS IS A FRAMEWORK OR A LIBRARY? 12
13. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 NEXT.JS The React Framework for the Web Next.js is a framework for building interactive, dynamic, and fast web applications. With Next.js, you can build user interfaces using React components. Then, Next.js provides additional structure, features, and optimizations for your application. Under the hood, Next.js also abstracts and automatically con fi gures tooling for you, like bundling, compiling, and more. This allows you to focus on building your application instead of spending time setting up tooling. 13
14. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 INTRODUCE YOURSELF! Your role? (Visual, Frontend, Backend, DevOps) Your experience? (One, three, more years) Using some Javascript framework already? (React, Next.js) 14
15. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 TIMETABLE: 1. The JAM stack ~2 min 2. The Reasoning ~2 min 3. The Drupal ~2 min 4. The Next.js ~2 min 5. The Module ~4 min 6. The Package~4 min 7. The Demo ~2 min 8. The Myths ~1 min 9. The Conclusion ~1 min 10. Q & A 10++ min 15
16. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 16 Chapter 1 THE JAM STACK
17. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 IT ALL STARTED IN AUGUST 2006 17
18. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 MODERN LIBRARIES 18
19. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 FRONTEND OR BACKEND DEVELOPER? 19
20. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 SERVERLESS 😂 20
21. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 BACKEND (API) 21
22. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 MARKUP (?) 22
23. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 23 Chapter 2 THE REASONING
24. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 WE WANT TO BE HEADLESS! 24
25. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 WHY HEADFUL? 25
26. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 WHY HEADLESS? 26
27. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE MEANING OF DECOUPLED 27
28. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 FULLY VS PROGRESSIVELY DECOUPLED 28
29. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 CREATE ONCE, PUBLISH ANYWHERE 29
30. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE CONSUMERS 30
31. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 APPLICATION LIKE BEHAVIOUR 31
32. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 32 Chapter 3 THE DRUPAL
33. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 PARTNER FROM HEAVEN 33
34. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 API FIRST 34
35. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 35 Chapter 4 THE NEXT.JS
36. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 REACT BEST BUDDY 36
37. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 POPULAR 37
38. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 RICH ECOSYSTEM 38
39. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 39 ACTIVELY DEVELOPED
40. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 40 Chapter 5 THE MODULE
41. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 41 Chapter 6 THE PACKAGE
42. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 42 Chapter 7 THE DEMO
43. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 43 NEVER DO A LIVE DEMO!* -MORTEN BIRCH {{MORTEND.DK}}
44. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 DDEV FOR LOCAL DEVELOPMENT 44
45. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 CMS TEMPLATES - DRUPAL 10 45
46. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE DRUPAL 46
47. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE ARTICLE (DRUPAL) 47
48. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE POST (NEXT.JS) 48
49. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 YOUTUBE DEMO 49
50. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 50 Chapter 8 THE MYTHS
51. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 FINALLY, SOMETHING THAT WORKS OUT OF THE BOX! 51
52. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 I CAN DO THIS EASILY! 52
53. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 SO NO ONE CAN DO THIS EASILY? 53
54. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 54 Chapter 9 THE CONCLUSION
55. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THE RIGHT TOOL FOR THE JOB Never overthink or over-engineer Never pick latest hype — aim for sustainability Never think Drupal — think architecture Keep it simple, enhance only when required Know well JavaScript, React, Next.js or you’ll suffer 55
56. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 56 Chapter 9 THE RESOURCES
57. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 1202: APOLLO GUIDANCE COMPUTER HAD CRASHED 57
58. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 DECOUPLED DRUPAL WITH NEXT.JS 58
59. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 INTRODUCTION TO HEADLESS DRUPAL + NEXT.JS 59
60. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 AUTHOR OF THE MODULE, ARSHAD 60
61. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 UMAMI DEMO (NEXT.JS RENDERED) 61
62. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 Q & A Mladen Đurić 
 @MacMladen 62
63. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 THANKS! Mladen Đurić 
 @MacMladen 63
64. @MacMladen ]{ Next.js with Drupal v.1 2023-06-01 64