Beyond the Usual, Passive DEI Efforts in Tech

Blog: Next.js with Styled System Starter Kit

Loading...
Manny Becerra as a child

September 2019

2020 Update: The starter kit has been updated to leverage Theme-UI under-the-hood through composition. Check out the latest version of the kit at nextjs-themeui-starter.vercel.app!

Several years ago, I touched on a new React framework called Next.js by Vercel (formerly Zeit). Since then, I've been using Next.js on pretty much any-and-all projects whenever possible.

Screen shot of the Next.js and Theme UI Starter Kit

Screen shot of the Next.js and Theme UI Starter Kit in both Desktop View

Run-down

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

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

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.

Related:


Loading...
Manny Becerra as a child

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.