Next.js Authentication Starter

A production-ready Next.js starter application with authentication, dashboard, and modern UI components.

Features

✅ Authentication System

• Sign up and sign in forms with validation
• JWT token-based authentication
• Persistent authentication state
• Protected routes
• Automatic redirects

✅ UI & UX

• Animated forms using Framer Motion
• Light/Dark theme support
• Responsive design
• CSS Modules for styling
• Custom design token system

✅ State Management

• Redux Toolkit for client state
• TanStack Query for server state
• Persistent auth state in localStorage

✅ Dashboard

• Responsive sidebar navigation
• Collapsible sidebar for mobile
• Multiple dashboard pages (Profile, Settings)
• Theme switcher
• User information display

✅ Developer Experience

• TypeScript throughout
• React Hook Form + Zod validation
• ESLint configuration
• Modern folder structure
• Component-based architecture

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• State Management: Redux Toolkit + TanStack Query
• Forms: React Hook Form + Zod
• Animations: Framer Motion
• Styling: CSS Modules + CSS Variables
• Authentication: JWT (API integration ready)

Getting Started

1. Install Dependencies

npm install

2. Environment Setup

Copy the example environment file and configure it:

cp .env.example .env.local

Update the .env.local file with your API URL:

NEXT_PUBLIC_API_URL=http://localhost:3001/api

3. Run Development Server

npm run dev

Open http://localhost:3000 to see the application.

Project Structure

src/
├── app/                    # Next.js App Router
│   ├── auth/              # Authentication pages
│   ├── dashboard/         # Dashboard pages
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page (redirects)
├── components/            # Shared components
│   ├── form/              # Form components
│   ├── layout/            # Layout components
│   ├── ui/                # UI primitives
│   ├── ProtectedRoute.tsx # Route protection
│   └── Providers.tsx      # App providers
├── features/              # Feature-based modules
│   └── auth/              # Authentication feature
│       ├── components/    # Auth-specific components
│       ├── hooks/         # Auth hooks
│       ├── api.ts         # API calls
│       ├── model.ts       # Type definitions
│       └── schemas.ts     # Validation schemas
├── hooks/                 # Global hooks
├── lib/                   # Utilities
├── store/                 # Redux store
├── styles/                # Global styles
└── types/                 # Global types

API Integration

The authentication system is designed to work with your backend API. The expected API endpoints are:

POST /auth/signin

{
  "email": "user@example.com",
  "password": "password123"
}

Response:

{
  "user": {
    "id": "user-id",
    "name": "John Doe", 
    "email": "user@example.com",
    "createdAt": "2023-01-01T00:00:00Z",
    "updatedAt": "2023-01-01T00:00:00Z"
  },
  "token": "jwt-token",
  "message": "Signed in successfully"
}

POST /auth/signup

{
  "name": "John Doe",
  "email": "user@example.com", 
  "password": "password123"
}

Response: Same as signin

POST /auth/signout

Headers: Authorization: Bearer <token>

POST /auth/refresh

Headers: Authorization: Bearer <token>

Features Overview

Authentication Forms

• Signin Form: Email/password with validation
• Signup Form: Name/email/password/confirm password with validation
• Form Animations: Smooth transitions and error animations
• Validation: Real-time validation using Zod schemas

Dashboard Layout

• Responsive Sidebar: Collapsible navigation with icons and labels
• Theme Switcher: Toggle between light and dark modes
• User Info: Display user avatar, name, and email
• Navigation: Dashboard, Profile, Settings pages

State Management

• Authentication State: User info, token, loading states
• UI State: Sidebar collapse, theme preference
• Server State: API calls with caching and error handling

Theming

• CSS Variables: Centralized design tokens
• Dark Mode: Complete dark theme support
• Responsive: Mobile-first responsive design

Customization

Adding New Pages

1. Create page in src/app/dashboard/
2. Add route to sidebar navigation in components/layout/Sidebar.tsx
3. Wrap with ProtectedRoute and DashboardLayout

Modifying Themes

Edit src/styles/tokens.css to customize:

• Colors
• Spacing
• Typography
• Border radius
• Shadows

Adding Form Fields

1. Define schema in appropriate feature schemas.ts
2. Use FormInput component with validation
3. Handle submission in form component

Development Commands

# Development
npm run dev          # Start development server

# Building
npm run build        # Build for production
npm run start        # Start production server

# Linting
npm run lint         # Run ESLint

License

MIT License - feel free to use this starter for your projects.