Component First Development with Next.js
Using Next.js, React, Tailwind and Storybook for super slick app development
I’ve recently begun using Next.js for a number of my projects, having used React alone for a number of years. I made the switch to Next for a project I was working on the needed to be lightweight and deployed to a serverless environment. Next gave me everything I wanted; UI and API server in a single deployable project, React for the UI so I knew where I was, a really simple routing mechanism, and access to all the tools that I already used on my React projects. Pretty sweet!
But picking a React-based framework was just the start, I knew there were going to be some other elements to the tool set as I had some pretty specific requirements for how I wanted to build out my project.
I’m a huge fan of component-based development in React. To that end I find Storybook a massive element of my day to day development. I can visualize my components in all of their states, even weird edge-states, super easily with Storybook, and also use it as a tool for unit testing those states. Super useful in my preferred CI build process where I’m committing changes almost by the minute. It’s also a great way to demo what I’m working on to stakeholders so that we can iterate on design ideas rapidly.