Metronic Next.js

https://docs.keenthemes.com/metronic-nextjs
Admin
Metronic Next.js is a powerful React dashboard framework built with Next.js and Tailwind CSS,...
Tokens:24,491
Snippets:284
Trust Score:10
Update:6 months ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/installation

Launch the local development server.

```bash
npm run dev
```

--------------------------------

### Start Node.js Production Server

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

To run your Next.js application with server-side rendering, build the application and then start the Node.js production server.

```bash
# Build your application
npm run build
 
# Start the Node.js server
npm run start
```

--------------------------------

### Initialize Environment Variables

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/installation

Create the .env file from the provided example template.

```bash
cp .env.example .env
```

--------------------------------

### Install Project Dependencies

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/installation

Use npm to install all required project dependencies. The --force flag is required due to modern dependency constraints.

```bash
npm install --force
```

--------------------------------

### Setup Database with Prisma

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/installation

Generate the Prisma client and run migrations to synchronize the database schema.

```bash
# Generate Prisma client
npx prisma generate
 
# Run migrations (if needed)
npx prisma migrate dev
```

--------------------------------

### Install Dependencies

Source: https://docs.keenthemes.com/metronic-nextjs/guides/custom-auth

Command to update project dependencies after removal.

```bash
npm install
```

--------------------------------

### Build Metronic Next.js for Production

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

Navigate to your project directory and run the build command to create optimized files for deployment. Ensure dependencies are installed if necessary.

```bash
# Navigate to your project directory
cd your-nextjs-project
 
# Install dependencies (if needed)
npm install
 
# Build for production
npm run build
```

--------------------------------

### Test Production Build Locally

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

Run these commands to build your Next.js application for production and then start a local server to preview the build. Visit `http://localhost:3000` to view.

```bash
npm run build
npm run start
```

--------------------------------

### Switching Demo Layouts with SettingsProvider

Source: https://docs.keenthemes.com/metronic-nextjs/guides/layouts

Demonstrates how to switch between different demo layouts programmatically using the `useSettings` hook from a custom settings provider. This example shows switching to 'demo5'.

```javascript
'use client';

import { useSettings } from '@/providers/settings-provider';

function LayoutSwitcher() {
  const { setOption } = useSettings();

  // Change to Demo5 layout
  const switchToDemo5 = () => {
    setOption('layout', 'demo5');
  };

  return (
    <div>
      <button onClick={switchToDemo5}>Switch to Demo5</button>
      {/* Other layout options * /}
    </div>
  );
}
```

--------------------------------

### Example Translation File Structure (en.json)

Source: https://docs.keenthemes.com/metronic-nextjs/guides/internationalization

Organize translations in JSON files, typically named after the language code (e.g., `en.json`). This example shows a basic structure with common and auth-related translations.

```json
// Example: en.json
{
  "common": {
    "save": "Save",
    "cancel": "Cancel",
    "error": "Error"
  },
  "auth": {
    "login": {
      "title": "Sign in to your account",
      "button": "Sign in"
    }
  }
}

```

--------------------------------

### Switch Layouts

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/starter-kits

Example of wrapping children with a specific layout component in the protected layout file.

```jsx
<Demo5Layout>
  {children}
</Demo5Layout>
```

--------------------------------

### Deploy with Vercel CLI

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

Install the Vercel CLI globally and use the `vercel` command to deploy your Next.js application. Vercel automatically detects Next.js and optimizes build settings.

```bash
# Install Vercel CLI
npm install -g vercel
 
# Deploy
vercel
```

--------------------------------

### Supabase Connection String Format

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/supabase

Example format for a PostgreSQL connection string used to connect Prisma Client to a Supabase database.

```text
postgres://username:password@db.supabase.co:5432/dbname
```

--------------------------------

### Controlling Layout Options with SettingsProvider

Source: https://docs.keenthemes.com/metronic-nextjs/guides/layouts

Shows how to interact with layout options using the `useSettings` hook. This example retrieves the current sidebar collapse state and provides a button to toggle it for 'demo1'.

```javascript
'use client';

import { useSettings } from '@/providers/settings-provider';

function SidebarController() {
  const { getOption, storeOption } = useSettings();

  // Get current sidebar state
  const sidebarCollapsed = getOption('layouts.demo1.sidebarCollapse');

  // Toggle sidebar state
  const toggleSidebar = () => {
    storeOption('layouts.demo1.sidebarCollapse', !sidebarCollapsed);
  };

  return (
    <button onClick={toggleSidebar}>
      {sidebarCollapsed ? 'Expand' : 'Collapse'} Sidebar
    </button>
  );
}
```

--------------------------------

### GitHub Actions Workflow for Vercel Deployment

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

This GitHub Actions workflow automates the deployment of a Next.js site to Vercel. It checks out the code, sets up Node.js, installs the Vercel CLI, and deploys to production.

```yaml
name: Deploy Next.js site to Vercel

on:
  push:
    branches: ["main"]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Deploy to Vercel
        run: vercel deploy --prod --token=${{ secrets.VERCEL_TOKEN }}
```

--------------------------------

### Tooltip Component Usage

Source: https://docs.keenthemes.com/metronic-nextjs/guides/providers

Provides an example of creating a button with a tooltip using the `Tooltip`, `TooltipContent`, and `TooltipTrigger` components. This relies on the `TooltipsProvider` being active.

```typescript
'use client';
 
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/tooltip';
 
function ButtonWithTooltip() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button>Hover me</button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Tooltip content</p>
      </TooltipContent>
    </Tooltip>
  );
}
```

--------------------------------

### Create Custom Image Optimization Loader

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

Create a custom image loader file (`my-image-loader.js`) to define how Next.js optimizes images. This example uses a CDN.

```javascript
// my-image-loader.js
export default function myImageLoader({ src, width, quality }) {
  return `https://your-cdn.com/${src}?w=${width}&q=${quality || 75}`
}
```

--------------------------------

### Navigate Between Routes

Source: https://docs.keenthemes.com/metronic-nextjs/guides/routing

Examples of using the Link component for standard navigation and programmatic navigation via hooks.

```tsx
import Link from 'next/link';
 
// Basic link
<Link href="/dashboard">Dashboard</Link>
 
// Link with additional props
<Link href="/profile" prefetch={false} className="profile-link">
  Profile
</Link>
```

```tsx
'use client';
 
import { useRouter } from 'next/navigation';
 
function LoginForm() {
  const router = useRouter();
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    // Login logic...
    router.push('/dashboard');
  };
 
  return <form onSubmit={handleSubmit}>{/* Form fields */}</form>;
}
```

--------------------------------

### Nginx Configuration for Reverse Proxy

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

Example Nginx configuration when deploying behind a reverse proxy. Ensure the `proxy_pass` directive points to your running Next.js application.

```nginx
location /my-app {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}
```

--------------------------------

### Settings Provider for Local Storage Persistence

Source: https://docs.keenthemes.com/metronic-nextjs/guides/providers

Illustrates how to use the `useSettings` hook to get and store application settings, with automatic persistence to localStorage. Ensure the `SettingsProvider` is included in your layout.

```typescript
'use client';
 
import { useSettings } from '@/providers/settings-provider';
 
function LayoutSettings() {
  const { getOption, storeOption } = useSettings();
 
  const sidebarCollapsed = getOption('layouts.demo1.sidebarCollapse');
 
  function toggleSidebar() {
    storeOption('layouts.demo1.sidebarCollapse', !sidebarCollapsed);
  }
 
  return <button onClick={toggleSidebar}>
    {sidebarCollapsed ? 'Expand' : 'Collapse'} Sidebar
  </button>;
}
```

--------------------------------

### Translation with Variables

Source: https://docs.keenthemes.com/metronic-nextjs/guides/internationalization

Pass variables to translation strings to dynamically insert values. The example assumes a translation key like `greeting` with the format `Hello, {{name}}!`.

```javascript
// Translation: "Hello, {{name}}!"
const greeting = t('greeting', { name: 'John' });

```

--------------------------------

### Clean Up Environment Variables

Source: https://docs.keenthemes.com/metronic-nextjs/guides/custom-auth

Remove or comment out NextAuth and database-related environment variables from your `.env.local` file to reflect the removal of NextAuth and potentially a different database setup.

```dotenv
# Remove these NextAuth variables:
# NEXTAUTH_URL=
# NEXTAUTH_SECRET=
# GOOGLE_CLIENT_ID=
# GOOGLE_CLIENT_SECRET=

# Remove these database variables:
# DATABASE_URL=
# DIRECT_URL=
```

--------------------------------

### Configure Environment Variable

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/supabase

Add the database connection string to the project's .env file.

```text
DATABASE_URL=postgres://username:password@db.supabase.co:5432/dbname
```

--------------------------------

### Configure Environment Variables

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/installation

Define necessary credentials for database, authentication, storage, and SMTP services.

```text
# Prisma Config #
# Connect to Supabase via connection pooling.
DATABASE_URL="postgresql://postgres.your-project:your-password@aws-0-region.pooler.supabase.com:6543/postgres?pgbouncer=true"
 
# Direct connection to the database. Used for migrations.
DIRECT_URL="postgresql://postgres.your-project:your-password@aws-0-region.pooler.supabase.com:5432/postgres"
 
# Next Auth Config #
NEXT_PUBLIC_API_URL=http://localhost:3000/api
NEXTAUTH_URL=http://localhost:3000/
NEXTAUTH_SECRET=your-nextauth-secret-key
GOOGLE_CLIENT_ID=your_google_oauth2_client_id
GOOGLE_CLIENT_SECRET=your_google_oauth2_secret_key
 
# Storage Configuration (AWS S3 or DigitalOcean Spaces)
STORAGE_TYPE=digitalocean
 
STORAGE_ACCESS_KEY_ID=your_accent_key_id
STORAGE_SECRET_ACCESS_KEY=your_access_key
STORAGE_REGION=your_region
STORAGE_BUCKET=your_bucket_name
STORAGE_ENDPOINT=your_endpoint
STORAGE_FORCE_PATH_STYLE=true
STORAGE_CDN_URL=your_cdn_url
 
# SMTP Credentials
SMTP_HOST=your_smtp_host
SMTP_PORT=your_smtp_port
SMTP_SECURE=false
SMTP_USER=no-reply@domain.com
SMTP_PASS=your_smtp_pass
 
# Base Path (Optional - for subdirectory deployments)
# Set this if deploying to a subdirectory like /my-app
# NEXT_PUBLIC_BASE_PATH=/my-app
```

--------------------------------

### Organize Routes with Route Groups

Source: https://docs.keenthemes.com/metronic-nextjs/guides/routing

Demonstrates how folders with parentheses group routes without affecting the URL path.

```text
app/
├── (auth)/       # Authentication routes that don't include "(auth)" in URL
│   ├── signin/   # URL: /signin
│   └── signup/   # URL: /signup
└── (protected)/  # Protected routes that don't include "(protected)" in URL
    └── account/  # URL: /account
```

--------------------------------

### Configure Prisma Database URL

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/prisma

Add the connection string to your .env file to allow Prisma to connect to the database.

```text
DATABASE_URL="prisma+postgres://accelerate.prisma-data.net/?api_key=your_api_key"
```

```text
DATABASE_URL="prisma+postgres://username:password@host:port/database?api_key=your_api_key"
```

--------------------------------

### Configure Base Path using Environment Variable

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

Recommended method for subdirectory deployment. Set the `NEXT_PUBLIC_BASE_PATH` environment variable in your `.env.production` file.

```env
# For subdirectory deployment
NEXT_PUBLIC_BASE_PATH=/
```

--------------------------------

### Deploy Prisma Schema

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/supabase

Command to apply changes from the prisma/schema.prisma file to the database.

```bash
npx prisma db push
```

--------------------------------

### Implement theme patterns with Server Components

Source: https://docs.keenthemes.com/metronic-nextjs/guides/dark-mode

Demonstrates the integration of server-rendered content with client-side theme toggling.

```typescript
// app/theme-example/page.tsx
import { ServerThemeContent } from './server-content';
import { ClientThemeToggle } from './client-toggle';
 
// This is a server component
export default function ThemePage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold dark:text-white mb-4">
        Theme Example Page
      </h1>
 
      {/* This content uses dark mode classes but doesn't need theme state */}
      <ServerThemeContent />
 
      {/* Client component boundary for theme toggling */}
      <ClientThemeToggle />
    </div>
  );
}
```

```typescript
// app/theme-example/server-content.tsx
// This is a server component that uses dark mode classes
export function ServerThemeContent() {
  return (
    <div className="bg-white dark:bg-gray-800 p-4 rounded-md mb-4">
      <p className="text-gray-800 dark:text-gray-200">
        This component is rendered on the server, but still responds to theme
        changes thanks to Tailwind's dark mode classes.
      </p>
    </div>
  );
}
```

```typescript
// app/theme-example/client-toggle.tsx
'use client';
 
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
 
export function ClientThemeToggle() {
  const { theme, setTheme, resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
 
  useEffect(() => {
    setMounted(true);
  }, []);
 
  if (!mounted) {
    return <div className="h-8"></div>; // Placeholder to avoid layout shift
  }
 
  return (
    <div className="mt-4">
      <p className="mb-2">Current theme: {theme}</p>
      <p className="mb-2">Resolved theme: {resolvedTheme}</p>
      <div className="flex gap-2">
        <button
          className="px-4 py-2 bg-blue-500 text-white rounded"
          onClick={() => setTheme('light')}
        >
          Light
        </button>
        <button
          className="px-4 py-2 bg-blue-500 text-white rounded"
          onClick={() => setTheme('dark')}
        >
          Dark
        </button>
      </div>
    </div>
  );
}
```

--------------------------------

### Project Directory Structure

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/installation

Overview of the project file organization based on the Next.js App Router.

```text
app/                    # Next.js App Router directory
├── (auth)/             # Authentication routes (signin, signup, etc.)
├── (protected)/        # Protected routes requiring authentication
│   ├── account/        # Account settings pages
│   ├── page.tsx        # Dashboard page (default protected route)
│   └── layout.tsx      # Layout for protected routes
├── api/                # API routes
│   ├── auth/           # Authentication API endpoints
│   └── [...]/          # Other API endpoints
├── components/         # Shared UI components
│   ├── layouts/        # Multiple demo layouts (Demo1-Demo10)
│   └── ui/             # Base UI components
├── models/             # Data models and interfaces
└── layout.tsx          # Root layout component

components/             # Global UI components
config/                 # Configuration files
css/                    # Global CSS styles
hooks/                  # Custom React hooks
i18n/                   # Internationalization files
lib/                    # Utility libraries
prisma/                 # Prisma schema and migrations
providers/              # React context providers
├── auth-provider.tsx   # Authentication provider
├── i18n-provider.tsx   # Internationalization provider
├── query-provider.tsx  # TanStack Query provider
├── settings-provider.tsx # App settings provider
├── theme-provider.tsx  # Dark/light theme provider
└── tooltips-provider.tsx # Tooltips provider
public/                 # Static assets (images, fonts, etc.)
services/               # API service functions
types/                  # TypeScript type definitions
```

--------------------------------

### Switch Between LTR and RTL Languages

Source: https://docs.keenthemes.com/metronic-nextjs/guides/rtl

Use the `useLanguage` hook to get the current language code and a function to change the language. This allows users to switch between RTL and LTR interfaces.

```javascript
'use client';

import { useLanguage } from '@/providers/i18n-provider';

function LanguageSwitcher() {
  const { languageCode, changeLanguage } = useLanguage();

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>
        English (LTR)
      </button>
      <button onClick={() => changeLanguage('ar')}>
        Arabic (RTL)
      </button>
    </div>
  );
}
```

--------------------------------

### View Project Directory Structure

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/starter-kits

Displays the organization of the Next.js App Router and UI components.

```text
app/                    # Next.js App Router
├── (layouts)/          # Layout-specific routes
│   ├── layout-1/       # Layout 1 pages
│   ├── layout-2/       # Layout 2 pages
│   └── ...             # Other layouts
├── (auth)/             # Authentication routes
├── (protected)/        # Protected routes
├── api/                # API routes
└── layout.tsx          # Root layout
 
components/             # UI Components
├── layouts/            # Demo layouts (1-14)
│   ├── layout-1/       # Layout 1 components
│   ├── layout-2/       # Layout 2 components
│   └── ...             # Other layouts
└── ui/                 # Base UI components
```

--------------------------------

### Configure Self-Hosted Static Export

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

Add the `output: 'export'` configuration to `next.config.mjs` to enable static site generation. This is suitable for hosting without server-side features.

```javascript
export default {
  output: 'export',
}
```

--------------------------------

### Use RTL-Aware CSS Logical Properties

Source: https://docs.keenthemes.com/metronic-nextjs/guides/rtl

Replace `left`/`right` CSS properties with logical properties like `start`/`end` for direction-aware styling. Tailwind CSS provides prefixes such as `ps-`, `ms-`, `border-s`, etc.

```html
// ❌ Not RTL-aware
<div className="pl-4 ml-2 border-l">Content</div>

// ✅ RTL-aware
<div className="ps-4 ms-2 border-s">Content</div>
```

--------------------------------

### Configure ThemeProvider

Source: https://docs.keenthemes.com/metronic-nextjs/guides/dark-mode

Wraps the application with the next-themes provider to enable theme state management.

```typescript
// providers/theme-provider.tsx
'use client';
 
import { ThemeProvider as NextThemesProvider } from 'next-themes';
import { type ThemeProviderProps } from 'next-themes/dist/types';
 
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      {...props}
    >
      {children}
    </NextThemesProvider>
  );
}
```

```typescript
// app/layout.tsx
import { ThemeProvider } from '@/providers/theme-provider';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Generate Prisma Client

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/supabase

Command to generate the type-safe Prisma Client based on the current schema.

```bash
npx prisma generate
```

--------------------------------

### View Page Structure

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/starter-kits

Illustrates how pages are organized within the app directory by layout.

```text
app/(layouts)/
├── layout-1/           # Layout 1 pages
│   ├── page.tsx        # Dashboard page
│   └── layout.tsx      # Layout wrapper
├── layout-2/           # Layout 2 pages
│   ├── page.tsx        # Dashboard page
│   └── layout.tsx      # Layout wrapper
└── ...                 # Other layouts (3-14)
```

--------------------------------

### Access Local Application

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/installation

The URL to access the application once the development server is running.

```text
http://localhost:3000
```

--------------------------------

### Dynamic Route Folder Structure

Source: https://docs.keenthemes.com/metronic-nextjs/guides/routing

Use brackets in folder names to create dynamic routes that match various parameter values.

```nextjs
app/
└── user/
    └── [id]/
        └── page.tsx  # Matches /user/123, /user/abc, etc.
```

--------------------------------

### Configure Redirects After Auth Actions

Source: https://docs.keenthemes.com/metronic-nextjs/guides/authentication

Demonstrates how to specify callback URLs for post-login and post-logout redirects.

```javascript
// Redirect to a specific page after login
signIn('credentials', {
  redirect: true,
  callbackUrl: '/dashboard',
  email,
  password,
});
 
// Redirect to a specific page after logout
signOut({ callbackUrl: '/signin' });
```

--------------------------------

### Project Directory Structure

Source: https://docs.keenthemes.com/metronic-nextjs/guides/routing

Visual representation of the app directory organization for routes, layouts, and components.

```text
app/
├── (auth)/                 # Authentication route group (not included in URL)
│   ├── signin/             # Sign-in page
│   ├── signup/             # Sign-up page
│   └── forgot-password/    # Password recovery
├── (protected)/            # Protected routes requiring authentication
│   ├── account/            # Account settings section
│   │   ├── activity/       # Account activity page
│   │   ├── billing/        # Billing page
│   │   └── security/       # Security settings
│   ├── page.tsx            # Dashboard page (default protected route)
│   └── layout.tsx          # Layout for all protected routes
├── api/                    # API routes
│   ├── auth/               # Authentication API endpoints
│   └── [...]/              # Other API endpoints
├── components/             # Shared UI components used across pages
│   ├── layouts/            # Layout components (demo1-demo10)
│   └── ui/                 # UI components
├── models/                 # Data models and interfaces
└── layout.tsx              # Root layout (applies to all pages)
```

--------------------------------

### Catch-all Route Folder Structure

Source: https://docs.keenthemes.com/metronic-nextjs/guides/routing

Employ triple dots in folder names for catch-all routes that match multiple URL segments.

```nextjs
app/
└── docs/
    └── [...slug]/
        └── page.tsx  # Matches /docs/a, /docs/a/b, /docs/a/b/c, etc.
```

--------------------------------

### Format Dates and Money with Utilities

Source: https://docs.keenthemes.com/metronic-nextjs/guides/internationalization

Utilize the `formatDate` and `formatMoney` utility functions for consistent, localized formatting of dates and monetary values. Ensure the component is marked with 'use client'.

```javascript
'use client';
 
import { formatDate, formatMoney } from '@/i18n/format';
 
function TransactionItem({ transaction }) {
  return (
    <div>
      <span>{formatDate(transaction.date)}</span>
      <span>{formatMoney(transaction.amount)}</span>
      <span>{transaction.description}</span>
    </div>
  );
}

```

--------------------------------

### Environment Configuration

Source: https://docs.keenthemes.com/metronic-nextjs/guides/authentication

Required environment variables for NextAuth and OAuth providers.

```text
# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000/
NEXTAUTH_SECRET=your-nextauth-secret-key

# OAuth Providers
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
```

--------------------------------

### Implement Credentials Login Form

Source: https://docs.keenthemes.com/metronic-nextjs/guides/authentication

Uses NextAuth.js signIn method to authenticate users via email and password. Requires 'use client' directive and state management for form inputs.

```javascript
'use client';
 
import { useState } from 'react';
import { signIn } from 'next-auth/react';
import { useRouter } from 'next/navigation';
 
export default function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const router = useRouter();
 
  async function handleSubmit(e) {
    e.preventDefault();
    setError('');
 
    const result = await signIn('credentials', {
      redirect: false,
      email,
      password,
    });
 
    if (result?.error) {
      setError(result.error);
    } else {
      router.push('/');
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>
      <div>
        <label htmlFor="password">Password</label>
        <input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>
      <button type="submit">Sign In</button>
    </form>
  );
}
```

--------------------------------

### TanStack Query Usage for Data Fetching

Source: https://docs.keenthemes.com/metronic-nextjs/guides/providers

Demonstrates how to use the `useQuery` hook from TanStack Query for fetching and caching user data. Ensure the `QueryProvider` is set up in your layout.

```typescript
'use client';
 
import { useQuery } from '@tanstack/react-query';
 
function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json())
  });
 
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading user</div>;
 
  return <div><h1>{data.name}</h1><p>{data.email}</p></div>;
}
```

--------------------------------

### Authentication System File Structure

Source: https://docs.keenthemes.com/metronic-nextjs/guides/authentication

Overview of the directory layout for the authentication system within the Metronic Next.js project.

```text
app/
├── (auth)/                   # Authentication routes
│   ├── signin/               # Sign in page
│   ├── signup/               # Sign up page
│   └── reset-password/       # Password reset page
├── api/
│   └── auth/
│       └── [...nextauth]/    # NextAuth API routes
│           ├── auth-options.ts  # NextAuth configuration
│           └── route.ts      # API route handler
├── components/
│   └── ui/                   # UI components for forms
prisma/
└── schema.prisma             # Database schema with User model
providers/
└── auth-provider.tsx         # NextAuth SessionProvider
```

--------------------------------

### View Layout Component Structure

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/starter-kits

Shows the file organization within a specific layout directory.

```text
components/layouts/layout-1/
├── components/
│   ├── header.tsx           # Main header
│   ├── sidebar.tsx          # Sidebar navigation
│   ├── sidebar-menu.tsx     # Menu items
│   ├── sidebar-header.tsx   # Sidebar header
│   ├── toolbar.tsx          # Page toolbar
│   ├── breadcrumb.tsx       # Breadcrumb navigation
│   ├── mega-menu.tsx        # Mega menu
│   ├── mega-menu-mobile.tsx # Mobile menu
│   ├── footer.tsx           # Footer
│   ├── main.tsx             # Main content area
│   └── context.tsx          # Layout context
├── shared/                  # Shared components
└── index.tsx                # Layout entry point
```

--------------------------------

### Clear Build Cache

Source: https://docs.keenthemes.com/metronic-nextjs/getting-started/installation

Run these commands to resolve build errors by removing existing build artifacts and reinstalling dependencies.

```bash
rm -rf node_modules .next
npm install --force
```

--------------------------------

### Loading UI Component

Source: https://docs.keenthemes.com/metronic-nextjs/guides/routing

Implement a `loading.tsx` file to define a custom loading UI that displays while content is being fetched.

```javascript
export default function Loading() {
  return <div>Loading...</div>;
}
```

--------------------------------

### Create Simple Auth Context

Source: https://docs.keenthemes.com/metronic-nextjs/guides/custom-auth

Provides a React context for managing authentication state, including user data, login/logout functions, and loading status. It uses localStorage for session persistence and includes mock authentication logic. Use this provider at the root of your application to enable authentication features.

```typescript
'use client';

import { createContext, useContext, useState, useEffect, ReactNode } from 'react';

interface User {
  id: string;
  email: string;
  name: string;
  avatar?: string;
}

interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<boolean>;
  logout: () => void;
  isLoading: boolean;
  // Keep these for compatibility with existing UI
  data: { user: User | null } | null;
  status: 'loading' | 'authenticated' | 'unauthenticated';
}

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  // Check for existing session on mount
  useEffect(() => {
    const savedUser = localStorage.getItem('auth-user');
    if (savedUser) {
      setUser(JSON.parse(savedUser));
    }
    setIsLoading(false);
  }, []);

  const login = async (email: string, password: string): Promise<boolean> => {
    setIsLoading(true);

    // Mock authentication - replace with your API call
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate API delay

    if (email === 'demo@kt.com' && password === 'demo123') {
      const mockUser: User = {
        id: '1',
        email: 'demo@kt.com',
        name: 'Demo User',
        avatar: '/media/avatars/300-2.png'
      };

      setUser(mockUser);
      localStorage.setItem('auth-user', JSON.stringify(mockUser));
      setIsLoading(false);
      return true;
    }

    setIsLoading(false);
    return false;
  };

  const logout = () => {
    setUser(null);
    localStorage.removeItem('auth-user');
  };

  // Compatibility properties for existing UI components
  const data = user ? { user } : null;
  const status = isLoading ? 'loading' : user ? 'authenticated' : 'unauthenticated';

  return (
    <AuthContext.Provider value={{
      user,
      login,
      logout,
      isLoading,
      data,
      status
    }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
}

// For compatibility with NextAuth useSession hook
export function useSession() {
  const { data, status } = useAuth();
  return { data, status };
}

// Mock signIn function for compatibility
export async function signIn(provider: string, options?: Record<string, unknown>) {
  // Suppress unused parameter warning
  void options;

  if (provider === 'credentials') {
    // This will be handled by your login form
    return { error: null };
  }
  if (provider === 'google') {
    // Mock Google sign in - replace with your implementation
    console.log('Google sign in clicked - implement your Google auth here');
    return { error: null };
  }
  return { error: 'Provider not supported' };
}

// Mock signOut function for compatibility
export function signOut() {
  // For compatibility, we'll handle logout through the context directly
  const authUser = localStorage.getItem('auth-user');
  if (authUser) {
    localStorage.removeItem('auth-user');
    window.location.reload(); // Force a reload to update the auth state
  }
}

```

--------------------------------

### Define Dynamic Route Structure

Source: https://docs.keenthemes.com/metronic-nextjs/guides/adding-new-page

Folder structure for implementing dynamic parameters in the App Router.

```text
app/
└── (protected)/
    └── reports/
        └── [id]/
            └── page.tsx
```

--------------------------------

### Hardcode Base Path in next.config.mjs

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

Alternatively, hardcode the `basePath` and `assetPrefix` directly in your `next.config.mjs` file for subdirectory deployments.

```javascript
const nextConfig = {
  basePath: '/your-custom-path',
  assetPrefix: '/your-custom-path',
  output: 'standalone',
};
```

--------------------------------

### NextAuth.js Session Management

Source: https://docs.keenthemes.com/metronic-nextjs/guides/providers

Shows how to use the `useSession`, `signIn`, and `signOut` functions from next-auth/react to manage user authentication state. This requires the `AuthProvider` to be active.

```typescript
'use client';
 
import { useSession, signIn, signOut } from 'next-auth/react';
 
function LoginButton() {
  const { data: session } = useSession();
 
  if (session) {
    return <button onClick={() => signOut()}>Sign out</button>;
  }
  return <button onClick={() => signIn()}>Sign in</button>;
}
```

--------------------------------

### Implement Clipboard Functionality with useCopyToClipboard

Source: https://docs.keenthemes.com/metronic-nextjs/guides/hooks

Use `useCopyToClipboard` to easily add copy-to-clipboard functionality to your components. It manages the copied state and includes an optional reset timeout. Import from '@/hooks/use-copy-to-clipboard'.

```javascript
'use client';

import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard';

function CopyableText({ text }: { text: string }) {
  const { isCopied, copyToClipboard } = useCopyToClipboard({
    timeout: 2000 // Reset after 2 seconds
  });

  return (
    <div className="flex items-center">
      <code>{text}</code>
      <button onClick={() => copyToClipboard(text)}>
        {isCopied ? 'Copied!' : 'Copy'}
      </button>
    </div>
  );
}

```

--------------------------------

### Create a Client-Side Interactive Page

Source: https://docs.keenthemes.com/metronic-nextjs/guides/routing

Requires the 'use client' directive to enable React hooks and browser-side interactivity.

```tsx
'use client';
 
import { useState } from 'react';
 
export default function SettingsPage() {
  const [saved, setSaved] = useState(false);
 
  return (
    <div>
      <h1>Settings</h1>
      {saved && <div>Settings saved!</div>}
      <button onClick={() => setSaved(true)}>Save Settings</button>
    </div>
  );
}
```

--------------------------------

### Theme Provider for Dark/Light Mode

Source: https://docs.keenthemes.com/metronic-nextjs/guides/providers

Demonstrates toggling between dark and light modes using the `useTheme` hook from next-themes. This functionality is managed by the `ThemeProvider`.

```typescript
'use client';
 
import { useTheme } from 'next-themes';
 
function ThemeToggle() {
  const { theme, setTheme } = useTheme();
 
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}> 
      Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
    </button>
  );
}
```

--------------------------------

### Create a Custom Layout Component

Source: https://docs.keenthemes.com/metronic-nextjs/guides/layouts

Define a reusable layout component with header, main, and footer sections.

```typescript
// app/components/layouts/custom/layout.tsx
export function CustomLayout({ children }) {
  return (
    <div className="custom-layout">
      <header>My Custom Header</header>
      <main>{children}</main>
      <footer>My Custom Footer</footer>
    </div>
  );
}
```

--------------------------------

### App Router Layout Structure

Source: https://docs.keenthemes.com/metronic-nextjs/guides/layouts

Illustrates the directory structure for defining layouts in the Next.js App Router, showing how root, authentication, and protected layouts are organized.

```treeview
app/
├── layout.tsx           # Root layout (applies to all routes)
├── (auth)/
│   └── layout.tsx       # Auth layout (applies to all auth routes)
└── (protected)/
    ├── layout.tsx       # Protected layout (applies to all protected routes)
    └── account/
        └── layout.tsx   # Account layout (applies to all account routes)
```

--------------------------------

### Production Environment Variables

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

Configure production-specific environment variables in a `.env.production` file. Variables prefixed with `NEXT_PUBLIC_` are exposed to the browser.

```env
NEXT_PUBLIC_APP_NAME=metronic-nextjs
NEXT_PUBLIC_API_URL=https://your-production-api.com/api
NEXTAUTH_URL=https://your-domain.com
NEXTAUTH_SECRET=your-secret-key
```

--------------------------------

### Create Not Found Page

Source: https://docs.keenthemes.com/metronic-nextjs/guides/adding-new-page

UI component for handling 404 scenarios for specific routes.

```tsx
// app/(protected)/reports/[id]/not-found.tsx
export default function ReportNotFound() {
  return (
    <div className="p-6 text-center">
      <h2 className="text-xl font-bold">Report Not Found</h2>
      <p className="mt-2">The report you're looking for doesn't exist.</p>
    </div>
  );
}
```

--------------------------------

### Create a Basic Page Component

Source: https://docs.keenthemes.com/metronic-nextjs/guides/routing

Standard structure for a server-side rendered page component.

```tsx
// Basic page component
export default function AccountPage() {
  return (
    <div>
      <h1>Account Settings</h1>
      <p>Manage your account preferences</p>
    </div>
  );
}
```

--------------------------------

### Remove Prisma Client

Source: https://docs.keenthemes.com/metronic-nextjs/guides/custom-auth

Delete the prisma client configuration file.

```bash
rm -f lib/prisma.ts
```

--------------------------------

### Monitor Viewport Dimensions with useViewport

Source: https://docs.keenthemes.com/metronic-nextjs/guides/hooks

Use `useViewport` to track the browser window's height and width. It automatically updates when the window is resized. Import from '@/hooks/use-viewport'.

```javascript
'use client';

import { useViewport } from '@/hooks/use-viewport';

function ResponsiveComponent() {
  const [height, width] = useViewport();

  return (
    <div>
      <h3>Viewport Dimensions</h3>
      <p>Width: {width}px</p>
      <p>Height: {height}px</p>
    </div>
  );
}

```

--------------------------------

### Root Layout with Nested Providers

Source: https://docs.keenthemes.com/metronic-nextjs/guides/providers

This code sets up the nested structure of context providers in the root layout, providing access to various application states and functionalities for all components.

```typescript
import { AuthProvider } from '@/providers/auth-provider';
import { I18nProvider } from '@/providers/i18n-provider';
import { QueryProvider } from '@/providers/query-provider';
import { SettingsProvider } from '@/providers/settings-provider';
import { ThemeProvider } from '@/providers/theme-provider';
import { TooltipsProvider } from '@/providers/tooltips-provider';
 
export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html className="h-full" suppressHydrationWarning>
      <body>
        <QueryProvider>
          <AuthProvider>
            <SettingsProvider>
              <ThemeProvider>
                <I18nProvider>
                  <TooltipsProvider>
                    {children}
                    <Toaster />
                  </TooltipsProvider>
                </I18nProvider>
              </ThemeProvider>
            </SettingsProvider>
          </AuthProvider>
        </QueryProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Update Menu Configuration

Source: https://docs.keenthemes.com/metronic-nextjs/guides/custom-auth

Comment out or remove the user management section in the menu configuration file.

```typescript
// Remove or comment out this section:
/*
{
  title: 'User Management',
  icon: ShieldUser,
  children: [
    {
      title: 'Users',
      path: '/user-management/users',
    },
    {
      title: 'Roles',
      path: '/user-management/roles',
    },
    // ... other user management menu items
  ],
},
*/
```

--------------------------------

### Protected Layout with Authentication Check

Source: https://docs.keenthemes.com/metronic-nextjs/guides/layouts

Implements a protected layout that uses `next-auth/react` to check user authentication status. Redirects unauthenticated users to the sign-in page and shows a loading state.

```javascript
'use client';

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function ProtectedLayout({ children }) {
  const { status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/signin');
    }
  }, [status, router]);

  if (status === 'loading') {
    return <div>Loading...</div>;
  }

  return status === 'authenticated' ? children : null;
}
```

--------------------------------

### I18n Provider for Language and RTL Support

Source: https://docs.keenthemes.com/metronic-nextjs/guides/providers

Shows how to manage language selection and RTL support using the `useLanguage` hook and `I18N_LANGUAGES` from the i18n configuration. Requires the `I18nProvider`.

```typescript
'use client';
 
import { useLanguage } from '@/providers/i18n-provider';
import { I18N_LANGUAGES } from '@/i18n/config';
 
function LanguageSelector() {
  const { languageCode, changeLanguage } = useLanguage();
 
  return (
    <select
      value={languageCode}
      onChange={(e) => changeLanguage(e.target.value)}
    >
      {I18N_LANGUAGES.map(lang => (
        <option key={lang.code} value={lang.code}>
          {lang.name}
        </option>
      ))}
    </select>
  );
}
```

--------------------------------

### Accessing Catch-all Route Parameters

Source: https://docs.keenthemes.com/metronic-nextjs/guides/routing

Catch-all parameters are provided as an array in the `params` prop, allowing you to join them into a single string.

```javascript
export default function DocsPage({ params }) {
  // slug will be an array, e.g., ['a', 'b', 'c'] for /docs/a/b/c
  return <div>Slug segments: {params.slug.join('/')}</div>;
}
```

--------------------------------

### Set Base Path for Nginx Deployment

Source: https://docs.keenthemes.com/metronic-nextjs/guides/deployment

After configuring Nginx, set the `NEXT_PUBLIC_BASE_PATH` environment variable in your `.env.production` file to match the Nginx location.

```env
NEXT_PUBLIC_BASE_PATH=/my-app
```

--------------------------------

### Create a forced theme wrapper component

Source: https://docs.keenthemes.com/metronic-nextjs/guides/dark-mode

Use this wrapper to ensure specific UI elements maintain a consistent theme regardless of the global site setting.

```typescript
// components/always-light-theme.tsx
'use client';
 
import { ThemeProvider } from 'next-themes';
import { ReactNode } from 'react';
 
export function AlwaysLightTheme({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider forcedTheme="light" attribute="class">
      {children}
    </ThemeProvider>
  );
}
```

--------------------------------

### Create Simplified User Model

Source: https://docs.keenthemes.com/metronic-nextjs/guides/custom-auth

Define a simplified `User` interface and mock data for UI display purposes. This version removes complex properties like roles, status, and timestamps.

```typescript
// Simple user types for UI display only
export interface User {
  id: string;
  email: string;
  name: string;
  avatar?: string;
}
 
// Mock data for development
export const MOCK_USER: User = {
  id: '1',
  email: 'demo@kt.com',
  name: 'Demo User',
  avatar: '/media/avatars/300-2.png'
};
```

--------------------------------

### Manage Navigation Menu State with useMenu

Source: https://docs.keenthemes.com/metronic-nextjs/guides/hooks

The `useMenu` hook helps manage the open/closed state and active status for navigation menus, including nested structures. Import from '@/hooks/use-menu'.

```javascript
'use client';

import { useMenu } from '@/hooks/use-menu';

function NavigationMenu() {
  const { isActive, toggle, close } = useMenu();

  // Example menu items
  const menuItems = [
    { title: 'Dashboard', path: '/dashboard' },
    {
      title: 'Users',
      path: '/users',
      children: [
        { title: 'User List', path: '/users/list' },
        { title: 'User Profile', path: '/users/profile' }
      ]
    }
  ];

  return (
    <ul>
      {menuItems.map((item) => (
        <li key={item.path}>
          <a
            className={isActive(item.path) ? 'active' : ''}
            onClick={() => toggle(item.path)}
          >
            {item.title}
          </a>

          {item.children && isActive(item.path) && (
            <ul>
              {item.children.map((child) => (
                <li key={child.path}>
                  <a
                    className={isActive(child.path) ? 'active' : ''}
                    onClick={() => close()}
                  >
                    {child.title}
                  </a>
                </li>
              ))}
            </ul>
          )}
        </li>
      ))}
    </ul>
  );
}

```

--------------------------------

### Create Loading State

Source: https://docs.keenthemes.com/metronic-nextjs/guides/adding-new-page

UI component displayed while content is loading.

```tsx
// app/(protected)/reports/loading.tsx
export default function Loading() {
  return <div className="p-6 text-center">Loading reports...</div>;
}
```

--------------------------------

### Protecting Routes

Source: https://docs.keenthemes.com/metronic-nextjs/guides/authentication

Creates a layout component to guard routes and redirect unauthenticated users to the sign-in page.

```typescript
'use client';
 
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
 
export default function ProtectedLayout({ children }) {
  const { status } = useSession();
  const router = useRouter();
 
  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/signin');
    }
  }, [status, router]);
 
  if (status === 'loading') {
    return <div>Loading...</div>;
  }
 
  return status === 'authenticated' ? children : null;
}
```

--------------------------------

### Authentication Actions

Source: https://docs.keenthemes.com/metronic-nextjs/guides/authentication

Handles sign in and sign out operations using NextAuth methods.

```typescript
'use client';
 
import { signIn, signOut, useSession } from 'next-auth/react';
 
function AuthActions() {
  const { status } = useSession();
 
  if (status === 'authenticated') {
    return <button onClick={() => signOut()}>Sign out</button>;
  }
 
  return <button onClick={() => signIn()}>Sign in</button>;
}
```

--------------------------------

### Implement Protected Layout

Source: https://docs.keenthemes.com/metronic-nextjs/guides/adding-new-page

Layout component that enforces authentication checks using next-auth.

```tsx
// app/(protected)/layout.tsx
'use client';
 
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useSession } from 'next-auth/react';
 
export default function ProtectedLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { status } = useSession();
  const router = useRouter();
 
  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/signin');
    }
  }, [status, router]);
 
  if (status === 'loading') {
    return <div>Loading...</div>;
  }
 
  return status === 'authenticated' ? children : null;
}
```

--------------------------------

### Delete Prisma Directory

Source: https://docs.keenthemes.com/metronic-nextjs/guides/custom-auth

Remove the prisma directory from the project root.

```bash
rm -rf prisma/
```
Tokens:
Raw