@webdevarif/dashui-setup
v0.2.0
Published
Zero-config providers, hooks, and middleware for Next.js + NextAuth + SWR (+ optional next-intl, Prisma)
Maintainers
webdevarifReadme
@webdevarif/dashui-setup
Zero-config providers, hooks, and middleware for Next.js 14+ + NextAuth v5 + next-intl + SWR + Prisma.
The Problem
Every Next.js + auth + i18n + data project needs the same boilerplate:
- Session providers
- i18n setup
- Data fetching with SWR
- Prisma singleton pattern
- Middleware for routing
This takes 2-3 hours per project and causes:
- ❌ Copy-paste pain
- ❌ Version mismatch bugs
- ❌ Inconsistent patterns
- ❌ Token burn on setup
The Solution
One line:
npm install @webdevarif/dashui-setupQuick Start
1. Wrap Your App (layout.tsx)
import { RootProvider } from '@webdevarif/dashui-setup'
import { auth } from '@/auth'
export default async function RootLayout({
children,
params: { locale }
}: {
children: React.ReactNode
params: { locale: string }
}) {
const session = await auth()
const messages = await import(`../../messages/${locale}.json`)
return (
<html lang={locale}>
<body>
<RootProvider
session={session}
locale={locale}
messages={messages.default}
>
{children}
</RootProvider>
</body>
</html>
)
}2. Use Hooks Anywhere
'use client'
import { useAuth, useI18n, useFetch } from '@webdevarif/dashui-setup/hooks'
export function Dashboard() {
const { data: session } = useAuth()
const t = useI18n()
const { data: stats } = useFetch('/api/stats')
return (
<div>
<h1>{t('dashboard.title')}</h1>
<p>Welcome {session?.user?.name}</p>
<p>Orders: {stats?.orderCount}</p>
</div>
)
}3. Use Prisma (API routes)
import { prisma } from '@webdevarif/dashui-setup/lib'
export async function GET() {
const users = await prisma.user.findMany()
return Response.json(users)
}What's Included
Providers
- AuthProvider — NextAuth SessionProvider wrapper
- I18nProvider — next-intl IntlProvider wrapper
- SWRProvider — Optimized SWR global config
- RootProvider — All three combined (recommended)
Hooks
- useAuth() — Access session and auth state
- useI18n() — Access translations
- useFetch(url) — Simplified data fetching with SWR
Utilities
- prisma — Singleton PrismaClient (prevents connection pool issues)
Default Configurations
SWR Config
{
revalidateOnFocus: false, // Don't refresh on window focus
revalidateOnReconnect: true, // Refresh when network reconnects
dedupingInterval: 60000, // Deduplicate requests within 60s
focusThrottleInterval: 300000, // Throttle focus revalidation to 5min
}Prisma Logger
- Development: Logs SQL queries
- Production: Silent
Installation
npm install @webdevarif/dashui-setup next-auth next-intl swr @prisma/clientPeer Dependencies
next>= 14next-auth>= 5next-intl>= 3swr>= 2@prisma/client>= 5react>= 18react-dom>= 18
What This Saves
| Task | Before | After |
|------|--------|-------|
| Setup time per project | 2-3 hours | 5 minutes |
| Auth provider config | 30 lines | 1 import |
| i18n setup | 40 lines | 1 import |
| SWR config | 20 lines | 1 import |
| Prisma singleton | 20 lines | 1 import |
| Data fetching | fetch().then() | useFetch('/api/...') |
Example Project Structure
my-app/
├── src/
│ ├── app/
│ │ ├── [locale]/
│ │ │ ├── layout.tsx (uses RootProvider)
│ │ │ └── page.tsx (uses useAuth, useI18n)
│ │ └── api/
│ │ └── users/
│ │ └── route.ts (uses prisma)
│ ├── messages/
│ │ ├── en.json
│ │ └── nl.json
│ ├── auth.ts
│ └── middleware.ts
├── prisma/
│ └── schema.prisma
└── package.jsonLicense
MIT