Under Maintenance
{message}
{timeLeft !== null && timeLeft > 0 && (
Estimated time remaining:
{formatTime(timeLeft)}
)}
{timeLeft === 0 &&
The maintenance is now complete. Please refresh the page.
}
);
};
export default MaintenancePage;
```
--------------------------------
### Validate Maintenance Config (TypeScript)
Source: https://context7.com/r1si/nextjs-maintenance-mode/llms.txt
Demonstrates the `validateMaintenanceConfig` type guard function to ensure the configuration object conforms to the expected structure and data types. It shows examples of both valid and invalid configurations and their corresponding validation results.
```typescript
import { validateMaintenanceConfig } from 'nextjs-maintenance-mode/config';
// Valid configuration
const validConfig = {
enabled: true,
startTime: "2025-01-15T10:00:00Z",
endTime: "2025-01-15T12:00:00Z",
message: "Maintenance"
};
console.log(validateMaintenanceConfig(validConfig)); // true
// Invalid: enabled is not boolean
const invalid1 = { enabled: "true" };
console.log(validateMaintenanceConfig(invalid1)); // false
// Invalid: startTime is not string
const invalid2 = { enabled: true, startTime: 12345 };
console.log(validateMaintenanceConfig(invalid2)); // false
// Valid: minimal config
const minimal = { enabled: false };
console.log(validateMaintenanceConfig(minimal)); // true
// Invalid: not an object
console.log(validateMaintenanceConfig(null)); // false
console.log(validateMaintenanceConfig("string")); // false
```
--------------------------------
### API: GET /api/maintenance-status
Source: https://github.com/r1si/nextjs-maintenance-mode/blob/main/README.md
Fetches the current maintenance status from the server. This endpoint is typically polled by client components to check if maintenance is active.
```APIDOC
## GET /api/maintenance-status
### Description
Retrieves the current maintenance status, including whether maintenance is active and any associated configuration details.
### Method
GET
### Endpoint
/api/maintenance-status
### Parameters
None
### Request Example
None
### Response
#### Success Response (200)
- **active** (boolean) - Indicates if maintenance mode is currently active.
- **config** (object) - The maintenance configuration object, which may include details like `startTime`, `endTime`, and `reason`.
- **reason** (string) - A message explaining the reason for the maintenance, if applicable.
#### Response Example
```json
{
"active": true,
"config": {
"enabled": true,
"endTime": "2025-01-15T12:00:00Z",
"reason": "Scheduled maintenance"
},
"reason": "Maintenance active until 2025-01-15T12:00:00Z"
}
```
```
--------------------------------
### Custom Polling Interval for Maintenance Status (TypeScript)
Source: https://github.com/r1si/nextjs-maintenance-mode/blob/main/CONTEXT7.md
Shows how to configure the `useMaintenanceStatus` hook to poll for maintenance status updates at a custom interval. This allows for more frequent or less frequent checks than the default.
```typescript
const { status } = useMaintenanceStatus({
pollInterval: 10000, // Poll every 10 seconds instead of 30
autoPoll: true,
})
```
--------------------------------
### Next.js Maintenance Page Component
Source: https://github.com/r1si/nextjs-maintenance-mode/blob/main/CONTEXT7.md
This component displays the maintenance page, handling loading states, errors, and displaying a countdown timer if provided. It utilizes hooks from the nextjs-maintenance-mode/client library for fetching maintenance status and managing the countdown.
```typescript
import {"use client" as default} from 'next/navigation'
import { useMaintenanceStatus, useCountdown, formatCountdown } from 'nextjs-maintenance-mode/client'
import { useRouter } from 'next/navigation'
import { useEffect } from 'react'
export default function MaintenancePage() {
const router = useRouter()
// Fetch status and auto-poll every 30 seconds
const { status, isLoading, error, refetch } = useMaintenanceStatus({
pollInterval: 30000,
autoPoll: true,
})
// Live countdown to endTime (updates every second)
const countdown = useCountdown(status?.config?.endTime)
// Format countdown as human-readable string
const timeRemaining = formatCountdown(countdown)
// Auto-redirect when maintenance is no longer active
useEffect(() => {
if (status && !status.active) {
console.log('Maintenance ended, redirecting to homepage...')
router.push('/')
}
}, [status, router])
if (isLoading) {
return (
🛠️ Under Maintenance
{status?.config?.message || 'We are performing scheduled maintenance. We'll be back soon!'}
{timeRemaining && (
Estimated completion in:
{timeRemaining}
)}
This page will automatically refresh when maintenance is complete.
)
}
```
--------------------------------
### Get comprehensive maintenance status
Source: https://context7.com/r1si/nextjs-maintenance-mode/llms.txt
Returns detailed maintenance status including active state, full config, and human-readable reason. Use the default path or supply a custom file path to inspect current configuration and compute human-readable explanations.
```TypeScript
import { getMaintenanceStatus } from 'nextjs-maintenance-mode/config';
const status = getMaintenanceStatus();
const status2 = getMaintenanceStatus('public/maintenance.json');
const status3 = getMaintenanceStatus();
```
--------------------------------
### Skip Maintenance Redirect for Maintenance Page (TypeScript)
Source: https://github.com/r1si/nextjs-maintenance-mode/blob/main/CONTEXT7.md
A code snippet for `proxy.ts` that prevents the maintenance redirect logic from interfering with the actual maintenance page. It ensures that requests to `/maintenance` are allowed to proceed without redirection.
```typescript
if (pathname.startsWith('/maintenance')) {
return NextResponse.next() // ← Don't redirect maintenance page
}
```
--------------------------------
### Next.js Maintenance Status API Route (TypeScript)
Source: https://github.com/r1si/nextjs-maintenance-mode/blob/main/example/README.md
API route in Next.js for polling the maintenance status. This endpoint can be used by the frontend to check if maintenance is active without a full page reload.
```typescript
import { NextResponse } from 'next/server';
import fs from 'fs/promises';
import path from 'path';
export async function GET() {
try {
const filePath = path.join(process.cwd(), 'public', 'maintenance.json');
const data = await fs.readFile(filePath, 'utf-8');
const config = JSON.parse(data);
return NextResponse.json(config);
} catch (error) {
console.error('Error reading maintenance.json:', error);
return NextResponse.json({ enabled: false, message: 'Error checking status' }, { status: 500 });
}
}
```
--------------------------------
### GET /api/maintenance-status
Source: https://context7.com/r1si/nextjs-maintenance-mode/llms.txt
This API endpoint retrieves the current maintenance status from the configuration file. It allows client-side applications to poll for updates on maintenance activity. The endpoint returns whether maintenance is active, the configuration details, and a reason if applicable.
```APIDOC
## GET /api/maintenance-status
### Description
Retrieves the current maintenance status, including whether it's active, the configuration, and any associated message or end time. Used for client-side polling to handle dynamic maintenance updates.
### Method
GET
### Endpoint
/api/maintenance-status
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
N/A (GET request with no body)
### Response
#### Success Response (200)
- **active** (boolean) - Indicates if maintenance is currently active.
- **config** (object) - Maintenance configuration details, including enabled status, endTime, and message.
- **reason** (string) - Explanation of the maintenance status, such as end time if active.
#### Response Example
{
"active": true,
"config": {
"enabled": true,
"endTime": "2025-01-15T12:00:00Z",
"message": "System upgrade in progress"
},
"reason": "Maintenance active until 2025-01-15T12:00:00Z"
}
#### Error Response (500)
- **active** (boolean) - Set to false on error.
- **config** (null) - Null on error.
- **reason** (string) - Error message, e.g., 'Error reading maintenance configuration'.
#### Error Response Example
{
"active": false,
"config": null,
"reason": "Error reading maintenance configuration"
}
```
--------------------------------
### Manual Refetch of Maintenance Status (TypeScript)
Source: https://github.com/r1si/nextjs-maintenance-mode/blob/main/CONTEXT7.md
Illustrates how to disable automatic polling for maintenance status and manually trigger a status refresh using the `refetch` function returned by `useMaintenanceStatus`. This is useful for updating status on user interaction, like clicking a button.
```typescript
const { status, refetch } = useMaintenanceStatus({
autoPoll: false, // Disable auto-polling
})
// Manually trigger refresh