⚠️ 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.

• ✅ 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.

With NPM

npm install @rzl-zone/next-kit

With Yarn

yarn add @rzl-zone/next-kit

With PNPM

pnpm add @rzl-zone/next-kit

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";

// Extra TypeScript Helpers
import { /* … */ } 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:

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

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

Make TypeScript & VSCode automatically provide autocomplete for @rzl-zone/next-kit without needing triple-slash references in every file, follow steps:

• 1️⃣ Install @rzl-zone/next-kit.

  • Make sure the package is installed:

    npm install @rzl-zone/next-kit@latest
    # or
    yarn add @rzl-zone/next-kit@latest
    # or
    pnpm add @rzl-zone/next-kit@latest

• 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" />

    • This tells TypeScript to include the types from @rzl-zone/next-kit globally.

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

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

• 4️⃣ Update tsconfig.json.

  • Make sure not to override "types" (or leave it empty) so TypeScript automatically picks up your types folder:

    // tsconfig.json
    {
      "compilerOptions": { 
        "strict": true,
        "typeRoots": [
          "./types", 
          "./node_modules/@types"
        ],
        // other your config...
      },
      "include": [
        "src", 
        "types"
      ],
      // other your config...
    }

    • typeRoots tells TS where to look for global type definitions.
    • The types folder comes first, so your references override or add to the default @types packages.

• 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 
        "typeRoots": [
          "./types", 
          "./node_modules/@types"
        ],
        // other your config...
      },
      "include": [
        "src", 
        "types"
      ],
      // other your config...
    }

    ℹ️ Tip: For JS projects, consider adding "checkJs": true for better IntelliSense.

Now, all types from @rzl-zone/next-kit are globally available, and you don’t need "types": ["@rzl-zone/next-kit"] in tsconfig.json.

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.

See CHANGELOG.

See CONTRIBUTING.

Please report issues to [email protected].

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

- Rzl App.
- All Contributors.

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

✅ Enjoy using @rzl-zone/next-kit?
Star this repo ⭐ and share it with other JavaScript developers!