next-karma Logo

Karma

next-karma Logo

React is "just javascript"

Karmais "just Next.js"


Stop worrying about nitty gritty low-level details in an ever-growing, ever more complex ecosystem. Focus on what's important: creating awesome features for your users in a fast and reliable way, yet retain all flexibility you might (n)ever need.
GitHub

Karma is truly open!

Don't need authentication? Delete it! Don't need internationalization? Throw it away!

There is no vendor lock-in - starting a Karma project means getting all the source code, right into your project. There is no waiting for new features or bugfixes. There are no breaking changes you have to follow because you're too deep in.

Karma contains what most larger projects will have anyways, not more, not less. A future upgrade path simply means: check the commit history the repository and pluck what you need.

This necessarily requires a bit of a different mindset:

on the one hand, you get solid defaults and can fix any potentially arising issues yourself, right when you need it.

Which is nice! No eternal wait until that annoying bug is finally fixed. You actually can fix it yourself. Karma isn't buried in your node_modules.

But it also means: you might have to fix urgent issues yourself - Karma is just here to lay the foundation. Getting familiar with at least some of the Karma code will thus be a long-term necessity. You will want to extend or cut features. For most users, the defaults however will be perfectly fine!

Where's the catch?

Karma is built with Vercel and GitHub in mind. If you don't plan on using either of them, some additional setup work will be required - but all features are generally compatible with any other hosting & CI/CD solution.

Stack

Next.js Logo

Next.js

Built on top of Next.js, Karma should ideally serve as starting point for new projects, but of course may provide inspiration for existing projects. Karma is built entirely on top of getStaticPaths / getStaticProps /getServerSideProps and thus supports all variants of both SSG & SSR!

Lightweight Core

Orchestrating features comes with a price, but a small one - Karma at its core is only ~4kB gzipped.

TypeScript Logo

TypeScript

To ensure scalability, long-term robustness and decent autocompletion, Karma is 100% TypeScript.

Chakra Logo

Chakra

Chakra provides composable and accessible UI building blocks. Instead of having to eventually fight it as with other component libraries, Chakra will go out of your way. Karma is maintained by a core contributor to Chakra, so it receives first class support.

Internationalization

Since Next.js 10 natively supports i18n, so does Karma! A lightweight custom implementation based on local JSONs is included. Similar to next-translate, assets can be included/omitted on a per-page & per-namespace basis.

Learn more (soon!)

Persistent Layouts

Karma embraced persistent layouts as one of its core features and makes of the trickier things to setup in a Next.js project dead-simple.

OAuth2 Logo

OAuth2

Support for 4 external providers is included out of the box as well as means to implement homegrown authentication, all based on a httpOnly cookie.
Karma supports various approaches, e.g. auto-reauthentication on SSG, automatic redirecting on failure and naturally SSR - all config-based per page, while keeping your flexibility.

Sentry Logo

Sentry

Miss no bugs with Sentry, neither on the frontend, nor in Next.js core functionality or API routes. Every deploy creates a new release, separately visible in Sentrys dashboard.

Jest Logo

Jest

All tests, integration or unit, run through Jest. To test API routes, a testLambda function is included. Karma comes with over 95% code coverage out of the box.

Testing Library Logo

@testing-library/react

Following best practices and with help from Testing Playground, jest-axe and html-validate/jest, all components and hooks are well tested. Flexible custom render functions for both components and hooks are already set up!

GitHub Actions Logo

Github Actions

Karma comes with 3 tailored GitHub workflows:
Before deploying to production, an Action will ensure types, linting, tests and post-deploy run Lighthouse. Simultanously, code coverage will be uploaded to CodeClimate.
Pull Requests will skip uploading code coverage.

PWA Logo

PWA

Thanks to next-offline, a ServiceWorker will be created on each deploy. An example component notifying users on found updates is included. To prevent being too opinionated here, no other PWA capabilities are included.

ESLint Logo

ESLint

Built on top of industry standards & community best practices, Karma comes with my personal eslint config. You may of course swap at any time.

...and more!

GitHub Issue templates, commitlint, lint-staged, husky, prettier, ...