Rakkas, the lightning fast Next.js alternative powered by Vite, has just released version 0.4.0.
If you're not familiar with Vite, it's an instance of a new class of tools, sometimes called non-bundlers, that leverage modern browsers' native EcmaScript modules support to do away with the bundling during development. This results in instant server start and much faster updates than traditional bundlers like Webpack, Rollup, or Parcel. These new tools (another example is Snowpack) improve developer experience so much that, once you try, you will never want to go back to your old tooling.
Vite (and therefore Rakkas) supports TypeScript, JSX, hot module replacement with React fast refresh, CSS modules, PostCSS, CSS preprocessors (just install sass, less, or stylus), and handling of static assets out of the box.
Rakkas is a MIT-licensed React framework similar to Next.js, it's not a clone. In fact, if you're familiar with Svelte -a user interface framework (like React or Vue)- many of Rakkas's features are inspired by SvelteKit, Svelte's web application building tool.
Important features of Rakkas are:
- ⚡ Lightning fast development server
- 📁 Intuitive file system-based routing
- 🖥️ Hassle free server-side rendering
- 📄 Static site generation (NEW!)
- ☸️ SPA-style client-side navigation
- ⬇️ Simple but effective data fetching system
- ⚙️ API routes to build and organize your backend
- 📚 Extensive documentation
The file system router maps your source files to web pages. For example, if you want a page /about, you just default-export a React component from src/pages/about.page.jsx or src/pages/about/page.jsx. Route parameters are also encoded in the file name: src/pages/users/[userName].page.jsx is rendered for /users/jane, /users/joe, and so forth. In this case, your component receives a params prop and the user name is available as params.userName.
Rakkas supports nested layouts for elements common to more than one page, like headers, footers, navigation bars etc. Each page or layout can fetch its own data using an isomorphic fetch function. For advanced use cases, you can implement your own data fetching helper functions or classes. The implementation can be different for the server and the client, opening up the possibility of avoiding the network roundtrip and serialization/deserialization while doing SSR.
API routes have a file system router similar to pages: /src/api/users.endpoint.js implements the endpoint /api/users. Functions exported from this file handle similarly named HTTP methods (i.e. get for GET, post for POST etc.) by taking a request object and returning a response object. You can also define middlewares for impementing abstractions relating to more than one endpoint.
If you're reading this on a Chromium-based desktop browser, you can try Rakkas online on StackBlitz. For a full-on experience, Rakkas project generator create-rakkas-app comes with lots of features, all optional: TypeScript, ESLint, StyleLint, Prettier, Cypress, and jest (for unit testing and/or API testing). It supports yarn and pnpm in addition to npm. To get started, just create a new project directory and run npx create-rakkas-app@latest, then follow the prompt. The optional demo app demonstrates a toy fullstack todo app that communicates via a simple REST API.
If you want to go further, there are integration examples with other popular tools:
There is also a RealWorld port (Rakkas implementation of the RealWorld specification), a simple but complete fullstack application demonstrating how to approach building a REST API, accessing your database (via Prisma), handling authentication, testing, and more.
Rakkas is still young and is not ready for production yet. But go ahead and give it a try and share your thoughts. Star us on Github and talk about Rakkas if you like what you see. If you have any questions, problems, or suggestions open a Github issue. If you want to contribute, fork and send a pull request. All feedback is welcome, positive or negative.
Top comments (2)
Nice! Amusing though that this article was published right before Next released their new 12th version with a custom Rust compiler built on top of SWC nextjs.org/blog/next-12
That is true 😅 But Vite is still faster than Webpack because it doesn't bundle during dev. Also the next version added a few interesting features that Next.js lacks: dev.to/cyco130/three-cool-rakkas-f...