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.
I am human, a father, and a problem solver: a tech and people leader with a passion and proven track-record in building and leading compassionate, productive teams—remote and on-site—within a continuous learning culture. My teams and I champion usable, inclusive digital products and online experiences. My work, passion and intentions also intersect with advising small businesses and political campaigns, life-long learning, outdoor advocacy, community building, and uplifting others. Learn more about Manny