© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. Using Next.js as a full- stack framework 2024/06/25 Vercel Meetup #1 Yuta Yamada (山田 悠太) CX Team, SoE Group, DPI Department Digital Innovation Headquarters Mitsubishi Heavy Industries, Ltd.

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 2 Yuta Yamada 山田悠太 nickname: モンゴル (@mongolyy) Who am I? Member of Digital Transformation(DX) promotion organization TechLead Developing an e-commerce site for mechanical consumables Current tech stack: Next.js, React, TypeScript Previous tech stack: Scala, Play Framework, Ruby on Rails

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 3 Agenda 1. How We Chose Our Technology Stack 2. Challenges and Solutions with Next.js as Full-Stack Framework

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 4 What do you prioritize in software architecture design?

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 5 In the book ‘Building Evolutionary Architectures’ https://www.amazon.co.jp/dp/1491986360 https://www.amazon.co.jp/dp/4873118565 Availability Agility Compatibility Configurability Flexibility Portability Responsiveness Scalability Testability Usability … (1) Neal Ford, Rebecca Parsons, Patrick Kua. “Chapter 1”, Building Evolutionary Architectures, O'Reilly Media, 2017 (1) Architecture concerns

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 6 In my DX promotion context There are two elements ➢ Usability • Users have become more discerning ➢ Agility • Speed is crucial for building a trusting relationship with the business division

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 7 How to achieve it? ✓ Usability • Front-end development is required ✓ Agility • Choose technologies with good developer experience • Reduce what we develop

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 8 Our choice ✓ Usability • Front-end development is required -> React, Next.js ✓ Agility • Choose technologies with good developer experience -> Next.js on Vercel • Reduce what we develop -> Utilizing Next.js as a full-stack framework -> Vercel

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 9 Inspiration from Headless Commerce DB Admin UI API Headless Commerce front-end client ✓ The front-end is directly related to usability and needs to be implemented ✓ Back-end can be thinly implemented by using SaaS （SaaS） （scratch）

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 10 Reconsidering with Next.js DB Admin UI API Headless Commerce Next.js client ➢ Since API requests require an API key, server-side processing such as SSR is necessary ➢ Since tasks like estimating and ordering need to be server-side (SSR or API Route) -> A large amount of server-side code is required (explain this later) （SaaS） SSR/ API Route React

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 11 We just tried it!

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 12 Next.js + SaaS(kintone) architecture

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 13 Consumables quotation and ordering site for users of our machinery products E-commerce site for mechanical consumables Previously communicated by phone, email, and fax.

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 14 As time passed, both the product and the team matured!

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 15 Next Step: Integrating with RDB ➢ Multi-business unit development ➢ RDB has a proven track record of data integration, making it easy to coordinate with the business unit's IT department ➢ Ensure consistency of table structure and code ➢ Migrate safely by managing the database schema in code ➢ Testability ➢ Test including DB layer by launching DB on Docker or using in-memory database ➢ Other ➢ Team became more technologically proficient over time

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 16 Key Considerations for Back-End Technology Selection ✓ Agility • Choose technologies with good developer experience • Reduce what we develop • All developers can act as full-stack engineers • The number of developers(3~4) does not change much • Front-end engineers can also handle back-end development and manage it safely

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 17 Next.js + Hasura architecture Copyright©2018 Hasura(Released under the MIT license)https://opensource.org/licenses/mit-license.php

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 18 Background of Hasura adoption ➢ With Hasura, we can ➢ Deploy GraphQL server quickly without writing code ➢ Use admin screen similar to previous SaaS experience ➢ What is Hasura? ➢ GraphQL server that provides GraphQL API based on DB schema ➢ There is an administration screen, which allows table definitions to be changed and data to be edited Copyright©2018 Hasura(Released under the MIT license)https://opensource.org/licenses/mit-license.php

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 19 Experience Next.js + Hasura architecture ➢ Pros ➢ User-friendly admin screen for easy start ➢ Built-in GraphiQL for quick GraphQL query testing ➢ DB data management ➢ Safely development through admin screen ➢ Version control for database schema (automatic migration file generation) ➢ Detailed access control (table/row/column level) ➢ Simple query calls using GraphQL-Codegen ➢ Cons ➢ More expensive to develop and learn than Prisma + RDB ➢ Not good at complex transactions ➢ In our case, it is mainly a reference system, so it is not a big problem ➢ Transaction will be supported in next version ➢ https://github.com/hasura/graphql-engine/issues/5773

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 20 Reconsidering with Next.js (reprint) DB Admin UI API Headless Commerce Next.js client ➢ Since API requests require an API key, server-side processing such as SSR is necessary ➢ Since tasks like estimating and ordering need to be server-side (SSR or API Route) -> A large amount of server-side code is required (explain this later) （SaaS） SSR/ API Route React

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 21 Challenges with Using Next.js as a Full-Stack Framework ➢ We needed to write a lot of server-side code ➢ We tried to make our code more reusable by splitting it into smaller functions, but: ➢ Different developers created functions of different sizes ➢ We lacked a shared understanding of how these functions should work together -> Reduced code readability and maintainability Dependency structure visualization

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 22 Solution We defined layers based on their roles and integrated and separated functions We were influenced by layered architecture Service function Validate data as it relates to processing and business logic. Transform data for frontend. Repository function Interacts with the data persistence layer, such as database. getServerSideProps Perform minimal validation, such as the presence of required parameters.

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 23 Summary ➢ My team prioritized usability and agility in our technology choices and made changes according to the product requirements and the growth of our team members ➢ When utilizing a full-stack framework, a shared understanding of design within the team became crucial ➢ Adaptation as tech and business change

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 24 宣伝 三菱重工業のDPI部では積極採用中です！ 「私たちの取り組みに興味ある！」「私たちと一緒に働いてみたい！」と思われた方は 「Findy 三菱重工」で検索！ https://findy-code.io/companies/501

No content

© MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 26 Vercel, the Vercel design, Next.js and related marks, designs and logos are trademarks or registered trademarks of Vercel, Inc. or its affiliates in the US and other countries.