Updating the Carbon React tutorial to Next.js 13
Backstory
I have been exploring and learning Next.js for some years now. Technically, I could be considered a hobbyist, using it for my pet projects. The concept of great web application architecture has been a constant part of my career, and I’ve closely followed the evolving trends and techniques. I even managed to get an architecture article into a web design magazine!
With no formal graphics and UX/UI design training, I became intrigued with web design trends and UX. Over time design systems emerged. When I started looking in to Next.js I did quite a bit of work with Material UI and Bootstrap, and some of their templates.
Then I came across IBM’s Carbon Design System.
Next.js 13
Working at IBM, I had been aware of Carbon Design System’s journey as it emerged out of the original IBM Bluemix Cloud user experience. I came to visit the system from time to time and what impressed me was the depth and completeness that came with it. I tend to approach web applications from a perspective of building the code and making the app work, which aligns strongly with the principles of the Carbon Design System.
Earlier in the year, I thought I would build a Create Next App, using the Carbon React components with the React app tutorial as a guide. I’ve pretty much always used create-next-app rather than with Create React App. I think it is a cleaner, lightweight development experience with a simpler approach to routing and page navigation.
It had been a while since I last looked at Next.js. Too long, in fact. As I began the new development, I realised that I needed to get into version 13. The team at Vercel had changed a *lot* of things, including routing, layouts, and all sorts of server functions I’ve not even explored yet.
So, I set about tackling two things at once to further my skills. I re-wrote the Create React App tutorial to be a Create Next App tutorial and started afresh learning Next.js 13 and its new architecture.
Open-Source collaboration
With this new work complete in my own isolated environment, I set out to find out if the IBM Carbon Design System team would be interested — and I was glad to say they were! Even though I work for IBM and could contact the Carbon team internally, the approach to get the new changes integrated was done fully through the public open-source process.
Working with this team has been truly amazing. They have always been attentive and accommodating, guiding me through the steps of merging pull requests and facilitating go/no-go discussions on various changes. The two pieces of work were a new repo with Create Next App code for different stages of the tutorial, and a change to the React tutorial development guide pages on the Carbon Design System website.
An updated Carbon React tutorial
After working with the Carbon team, we have updated the Carbon React tutorial to now be based fully on Next.js 13!
This new tutorial lives in the carbon-tutorial-nextjs repo. All content on the website has been updated to reflect this change as well.
The existing and outdated `carbon-tutorial` that was based on Create React App will be deprecated, and the repository set to read-only status soon.
I spoke with Taylor Jones, a dev lead on the Carbon team, about this change and what it means going forward. Here’s some excerpts from our conversation:
My new tutorial changes came to you a bit out of the blue, had you already begun to think about Next.js 13?
Yes, we’ve been having increased support interactions internally with teams that are using Next.js. We knew it was an increasingly common option for projects, and we were already ideating on how to best support new users on their journey of using `@carbon/react`. Updating the tutorial to be based on Next.js was a logical place to start, and we were thrilled when you approached us to work together on this!
Why is Next.js a new direction for the Carbon Design System?
The original Carbon React tutorial was built quite a while ago, before these next generation frameworks like Next.js and Remix came on the scene.
Updating the tutorial to Next.js was underscored by the current state of the Create React App project and how it’s now moving in a different direction. Moving away from Create React App to a more actively maintained project also ensures that our tutorial is not as vulnerable to future CVEs and security concerns.
Overall, providing a tutorial that is based on a modern and stable toolchain is really important to us. We’re excited to have this updated foundational learning exercise available for our users and future users coming to learn how to use the Carbon Design System in React.
What would you say to people who have previously taken the Carbon React tutorial?
While the codebase has been effectively replaced, the learnings that you acquired from the previous tutorial still hold true. The ways in which you use components remains the same, as does the overall approach to applying styling. That said, this is a great time to re-take the tutorial if you’re interested to get a feel for Next.js and refresh your knowledge of how to use Carbon React components and styling, particularly when using our latest major version, v11.
How strong is the open-source collaboration around the Carbon Design System?
Our team firmly believes in the value of open source and giving back to the broader design system ecosystem. We’re committed to doing our work in the open so that others can leverage what we’ve built to build great things themselves.
Our roadmap is public on a GitHub Project. We have a ton of issues that we’ve identified as great issues to get started with or ones that we’re asking for community involvement on. We even have an entirely community-led work stream in progress right now for adding typings to our react components. There’s a lot going on, and we’d love for more people to be a part of it!
Take a Look
This is a great opportunity to take a look at Carbon React components if you haven’t in the past, or refresh your understanding. Now, with the new carbon-tutorial-nextjs you can also dive into Next.js 13 and absorb some of the changes it brings.
Get started on the tutorial by visiting the website.
Finally, we’d love to hear any feedback you may have. I’m sure there are many new Next.js v13 features the community could add into the tutorial and improve the example app code base. The team have set up a discussion on GitHub, please share your thoughts and experience!
