No Justice. No Peace. #BlackLivesMatter

Blog:Next.js with Styled System Starter Kit

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.

See also:

Manny

Manny


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