@rzl-zone/next-kit

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

npm install @rzl-zone/next-kit@latest

With Yarn

yarn add @rzl-zone/next-kit@latest

With PNPM

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.

// 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:

• At layout.tsx:

  import "@rzl-zone/next-kit/progress-bar/default.css";
  

• At global stylesheet entry (e.g. globals.css):

  @import "@rzl-zone/next-kit/progress-bar/default.css";
  

Place your cursor inside { } or right after the package path @rzl-zone/next-kit/<put-cursor-here>, 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.

• 2️⃣ Create a types folder.

  • Inside your project root, make a folder called types:

    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:

    /// <reference types="@rzl-zone/next-kit/.references" />
    

  • You can add more references here if needed, for example:

    /// <reference types="@rzl-zone/next-kit/.references" />
    
    // eg more references (if needed):
    /// <reference types="node" />
    /// <reference types="react" />
    

• 4️⃣ Update tsconfig.json.

  • Make sure add types folder to "include", so TypeScript automatically picks up your types folder:

    // 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:

    // 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.

❤️ Sponsor this package

Help support development:
👉 Become a sponsor.

📝 Changelog

See CHANGELOG.

🤝 Contributing

See CONTRIBUTING.

🔒 Security

Please report issues to [e-mail].

💡 Recommended Stack

• ReactJS (18+).
• Next.js 14+ (App Router).
• TypeScript.
• Tailwind CSS (optional but recommended).

🙌 Credits

- Rzl App.
- All Contributors.

📜 License

The MIT License (MIT).
Please see License File for more information.

✅ Enjoy using @rzl-zone/next-kit?
Star the monorepo ⭐ and share it with other JavaScript developers!
📦 Explore other packages under @rzl-zone