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.
npm install @recode-js/next-toolkitA 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.
---
✅ 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
---
bash
npm install @recode-js/next-toolkit
`$3
bash
npm install next react react-dom
`---
Quick Start
$3
tsx
import NextToolkitProvider from "@recode-js/next-toolkit";export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
`---
Exports Overview
tsx
import {
NextToolkitProvider,
InjectNavigators,
useDrawer,
useToast,
ToastExample,
LoginPage,
SignUpPage,
createFormAction,
} from "@recode-js/next-toolkit";
`---
Navigation System
$3
tsx
import { InjectNavigators } from "@recode-js/next-toolkit";export default function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
`$3
tsx
import { useDrawer } from "@recode-js/next-toolkit";const { openDrawer, closeDrawer, toggleDrawer } = useDrawer();
`---
Toast System
$3
tsx
import { useToast } from "@recode-js/next-toolkit";const toast = useToast();
toast.success("Saved successfully");
toast.error("Something went wrong");
`$3
tsx
import { ToastExample } from "@recode-js/next-toolkit";
`---
Authentication Pages
$3
tsx
import { LoginPage } from "@recode-js/next-toolkit";export default function Login() {
return
}
`$3
tsx
import { SignUpPage } from "@recode-js/next-toolkit";export default function Register() {
return
}
`These pages are UI only.
You are responsible for authentication logic and APIs.
---
Server Actions Helper
$3
Utility to simplify Next.js Server Actions with validation and structured responses.
tsx
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:
tsx
import "@recode-js/next-toolkit/styles.css";
``No Tailwind, no CSS reset, no opinionated theme.
---
- Next.js 13+ (App Router)
- React 18+
- Works with Server Components & Client Components
- Supports Server Actions
---
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.
---
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.
---
MIT
---
---