Blog: Next.js with Styled System Starter Kit
Screen shot of the Next.js and Theme UI Starter Kit in both Desktop View
Next.js comes pre-packaged with lots of goodies right out-of-the-box to bootstrap your projects—check them out here!; however, there are certain design principles, patterns, and UI/X (sub)features that I tend to use, and rely on, for any given project that aren't (currently) packaged with Next.js. And, truthfully, I don't expect them to be pre-packaged with Next.js. The framework is setup to easily create and extend custom features. Given this, a couple of years ago, I started to put together a React-based boilerplate (or starter kit) that I can continuously enhance and clone for new projects. Last year, I started to migrate the boilerplate to Next.js. This allows me to take full advantage of all of Next.js's packaged features while also leveraging the (sub)features and design principles I love and rely on, like a built-in, customizable design system, functional composition, custom React hooks, and more. On a related note, creating a design system under a CSS-in-JSS paradigm becomes a breeze, and quite fun, using a set of utilities wrapped under one package dubbed Styled System.
Screen shot of the Next.js and Theme UI Starter Kit in both Desktop and Mobile View
Screen shot of the Next.js and Theme UI Starter Kit in both Mobile View
I've also added to the boilerplate common components and views, like a modal, optimized search utility, and a dynamic blog section, respectively, among other things. It makes sense to call the boilerplate,
Next.js with Styled System Starter Kit
Next.js with Theme UI Starter Kit. I still have a few core things to iron out; once done, I plan to release it into the wild as an open source project on GitHub for others to use and leverage if they'd like to.
- Learn Next.js
- Learn more about Styled System
- The State of Frontend (UI/X) à la React Hooks
I operate from a place of compassion, possibility and imagination. My work and efforts share a common goal: create a better, sustainable and equitable world by building inclusive communities, products & experiences.