@recode-js/next-toolkit
v0.0.2
Published
A Next.js–first toolkit providing prebuilt navigation, auth pages, form actions, drawer utilities, and toast system — designed to accelerate app development without locking you into a framework or UI library.
Readme
@recode-js/next-toolkit
A Next.js–first toolkit providing prebuilt navigation, auth pages, form actions, drawer utilities, and toast system — designed to accelerate app development without locking you into a framework or UI library.
This package is not a backend, not a BaaS, and not a full auth solution.
It provides UI + client/server utilities that you wire into your own logic.
Features
✅ Ready-to-use Login & Signup pages
✅ Form Actions helper for Next.js Server Actions
✅ Navigation system (Header, Drawer, Bottom Tab)
✅ Drawer state hook
✅ Toast notification system
✅ Next.js App Router compatible
✅ TypeScript-first
✅ No global CSS pollution
Installation
npm install @recode-js/next-toolkitPeer dependencies (required)
npm install next react react-domQuick Start
Wrap your app
import NextToolkitProvider from "@recode-js/next-toolkit";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<NextToolkitProvider>
{children}
</NextToolkitProvider>
</body>
</html>
);
}Exports Overview
import {
NextToolkitProvider,
InjectNavigators,
useDrawer,
useToast,
ToastExample,
LoginPage,
SignUpPage,
createFormAction,
} from "@recode-js/next-toolkit";Navigation System
Inject Navigators (Header + Drawer + Bottom Tab)
import { InjectNavigators } from "@recode-js/next-toolkit";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<InjectNavigators>
{children}
</InjectNavigators>
);
}Drawer Hook
import { useDrawer } from "@recode-js/next-toolkit";
const { openDrawer, closeDrawer, toggleDrawer } = useDrawer();Toast System
Trigger Toast
import { useToast } from "@recode-js/next-toolkit";
const toast = useToast();
toast.success("Saved successfully");
toast.error("Something went wrong");Example Component
import { ToastExample } from "@recode-js/next-toolkit";
<ToastExample />Authentication Pages
Login Page
import { LoginPage } from "@recode-js/next-toolkit";
export default function Login() {
return <LoginPage />;
}Signup Page
import { SignUpPage } from "@recode-js/next-toolkit";
export default function Register() {
return <SignUpPage />;
}These pages are UI only.
You are responsible for authentication logic and APIs.
Server Actions Helper
createFormAction
Utility to simplify Next.js Server Actions with validation and structured responses.
import { createFormAction } from "@recode-js/next-toolkit";
export const loginAction = createFormAction(async (formData) => {
const email = formData.get("email");
const password = formData.get("password");
// your logic here
});Styling
The toolkit ships with scoped styles only.
If a global stylesheet is required:
import "@recode-js/next-toolkit/styles.css";No Tailwind, no CSS reset, no opinionated theme.
Compatibility
- Next.js 13+ (App Router)
- React 18+
- Works with Server Components & Client Components
- Supports Server Actions
What this package is NOT
To avoid confusion:
❌ Not a backend service
❌ Not a complete auth system
❌ Not a UI framework like MUI or Chakra
❌ Not opinionated about API, database, or state
It is a toolkit, not a platform.
Philosophy
This package exists to:
- Reduce repetitive boilerplate
- Provide production-ready primitives
- Stay out of your business logic
- Remain easy to remove or replace
If you need full control — you have it.
License
MIT