# @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
```bash
npm install @recode-js/next-toolkit
```
### Peer dependencies (required)
```bash
npm install next react react-dom
```
---
## Quick Start
### Wrap your app
```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
### Inject Navigators (Header + Drawer + Bottom Tab)
```tsx
import { InjectNavigators } from "@recode-js/next-toolkit";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
### Drawer Hook
```tsx
import { useDrawer } from "@recode-js/next-toolkit";
const { openDrawer, closeDrawer, toggleDrawer } = useDrawer();
```
---
## Toast System
### Trigger Toast
```tsx
import { useToast } from "@recode-js/next-toolkit";
const toast = useToast();
toast.success("Saved successfully");
toast.error("Something went wrong");
```
### Example Component
```tsx
import { ToastExample } from "@recode-js/next-toolkit";
```
---
## Authentication Pages
### Login Page
```tsx
import { LoginPage } from "@recode-js/next-toolkit";
export default function Login() {
return ;
}
```
### Signup Page
```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
### createFormAction
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.**
---
## 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
---
## Maintained by
[Recode JS](https://github.com/recode-js)
---