Next KIT
Modern toolkit for scalable Next.js applications.
A flexible and extensible toolkit for building modern, type-safe fullstack applications with Next.js.
Provides reusable, type-safe utilities to speed up your development workflow and keep your codebase clean.
Built with ❤️ by @rzl-zone.
---
> ⚠️ ***This is a BETA Version release.***
> APIs, naming, or file structures may still change before v1.0.0.
---
> Type-safe utilities, opinionated conventions, and clean abstractions — designed to make your Next.js projects faster, cleaner, and more maintainable.
✨ Features
- ✅ Type-safe server actions with helpers.
- 🚀 API response formatter for consistent client/server comms.
- 🛠️ Utility functions for common patterns (progress-bar-loader, hoc, themes, etc.).
- ⚙️ Designed for scalability and convention.
---
⚙️ Installation
#### *With NPM*
```bash
npm install @rzl-zone/next-kit@latest
```
#### *With Yarn*
```bash
yarn add @rzl-zone/next-kit@latest
```
#### *With PNPM*
```bash
pnpm add @rzl-zone/next-kit@latest
```
---
💎 Detailed Features
### The full Next KIT documentation is **currently under construction** 🏗️.
#### For now, explore the examples or dive into the source — all utilities are documented via **TSDoc** and typed properly.
```ts
// Extras (e.g., getPathname, getSearchParams, etc.)
import {} from /* … */ "@rzl-zone/next-kit/extra";
import {} from /* … */ "@rzl-zone/next-kit/extra/action";
import {} from /* … */ "@rzl-zone/next-kit/extra/context";
import {} from /* … */ "@rzl-zone/next-kit/extra/pathname";
// Higher-Order Components (HOC)
import {} from /* … */ "@rzl-zone/next-kit/hoc";
// Progress Bar Loader
// (utility, type or interface for progress bar)
import {} from /* … */ "@rzl-zone/next-kit/progress-bar";
// (for App Directory)
import {} from /* … */ "@rzl-zone/next-kit/progress-bar/app";
// (for Pages Directory)
import {} from /* … */ "@rzl-zone/next-kit/progress-bar/pages";
// Themes Mode (dark, light, system)
// (hook, context, utility, type or interface for themes)
import {} from /* … */ "@rzl-zone/next-kit/themes";
// (for App Directory)
import {} from /* … */ "@rzl-zone/next-kit/themes/app";
// (for Pages Directory)
import {} from /* … */ "@rzl-zone/next-kit/themes/pages";
// General Utilities
import {} from /* … */ "@rzl-zone/next-kit/utils";
// Special Utilities (server-only contexts)
import {} from /* … */ "@rzl-zone/next-kit/utils/server";
// Extra TypeScript Helpers
import type {} from /* … */ "@rzl-zone/next-kit/types";
```
To enable the built-in progress bar styling, import the default CSS, this import can be placed in your layout.tsx or global stylesheet entry, for example:
1. At layout.tsx:
```ts
import "@rzl-zone/next-kit/progress-bar/default.css";
```
2. At global stylesheet entry (e.g. globals.css):
```css
@import "@rzl-zone/next-kit/progress-bar/default.css";
```
#### Place your cursor inside `{ }` or right after the package path `@rzl-zone/next-kit/`, then press Ctrl+Space (Windows/Linux) or Cmd+Space (macOS), or use your editor’s autocomplete shortcut, to see all available functions and types with full TSDoc hints.
---
Hint: Autocomplete Setup (Step by Step).
Improve TypeScript editor import suggestions for `@rzl-zone/next-kit`, so all functions, types, and modules appear instantly when triggering autocomplete — press `Ctrl+Space` (**Windows/Linux**), `⌘+Space` (**macOS**), or your editor’s autocomplete shortcut.
This works across modern TypeScript-supported editors (e.g., `VSCode`, `WebStorm`, `Vim extensions`, `NeoVim LSP`, `Cursor`) without requiring triple-slash references — the package is fully indexed automatically through your editor’s TypeScript language service, follow steps:
- 1️⃣ **Install @rzl-zone/next-kit.**
- Make sure the package is installed, see [**Installation Guide**](#installation).
- 2️⃣ **Create a types folder.**
- Inside your project root, make a folder called `types`:
```pgsql
project-root/
├─ src/
├─ types/
│ └─ index.d.ts
├─ tsconfig.json
└─ jsconfig.json
```
- 3️⃣ **Add the global reference file.**
- Create `types/index.d.ts` with this content:
```ts
///
```
- You can add more references here if needed, for example:
```ts
///
// eg more references (if needed):
///
///
```
- 4️⃣ **Update tsconfig.json.**
- Make sure add `types` folder to `"include"`, so **TypeScript** automatically picks up your types folder:
```jsonc
// tsconfig.json
{
"compilerOptions": {
"strict": true,
// other your config...
},
"include": ["src", "types"]
// other your config...
}
```
- 5️⃣ **Update jsconfig.json (for JavaScript projects).**
- If you also work with JS, do the same:
```jsonc
// jsconfig.json
{
"compilerOptions": {
"checkJs": true, // Optional, enables type checking
// other your config...
},
"include": ["src", "types"]
// other your config...
}
```
> ℹ️ ***Tip:*** *For JS projects, consider adding `"checkJs": true` for better IntelliSense.*
- 6️⃣ **Restart your editor/IDE.**
- This forces your TypeScript language service to re-index the package.
- After restart, **all functions, types, and modules from `@rzl-zone/next-kit` will appear instantly in autocomplete**.
---
🧪 Type Safety Built In
All core utilities are written in **TypeScript** with strong generics and inferred types — making your DX smooth and predictable.
---
**Help support development:**
***[👉 **Become a sponsor**](https://github.com/sponsors/rzl-app).***
---
📝 Changelog
**See [CHANGELOG](https://github.com/rzl-zone/rzl-zone/blob/main/packages/next-kit/CHANGELOG.md).**
---
🤝 Contributing
**See [CONTRIBUTING](https://github.com/rzl-zone/rzl-zone/blob/main/CONTRIBUTING.md).**
---
🔒 Security
**Please report issues to [rzlzone.dev@gmail.com](mailto:rzlzone.dev@gmail.com).**
---
💡 Recommended Stack
- ReactJS (18+).
- Next.js 14+ (App Router).
- TypeScript.
- Tailwind CSS (optional but recommended).
---
🙌 Credits
**- [Rzl App](https://github.com/rzl-app).**
**- [All Contributors](https://github.com/rzl-zone/rzl-zone/graphs/contributors).**
---
📜 License
**The MIT License (MIT).**
*Please see **[License File](https://github.com/rzl-zone/rzl-zone/blob/main/LICENSE)** for more information.*
---
✅ **Enjoy using `@rzl-zone/next-kit`?**
*Star the monorepo [⭐](https://github.com/rzl-zone/rzl-zone) and share it with other JavaScript developers!*
📦 Explore other packages under [`@rzl-zone`](https://github.com/rzl-zone/rzl-zone)
---
