```
### Step 2: Next.js Integration
In your Next.js application, add the tracking script to your main layout:
```typescript
// src/app/layout.tsx
import Script from 'next/script'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{/* Simple Analytics */}
{children}
)
}
```
### Step 3: API Integration for Dashboard
Create an API route to fetch your analytics data:
```typescript
// src/app/api/analytics/route.ts
import { NextRequest, NextResponse } from 'next/server'
export async function GET(request: NextRequest) {
const { searchParams } = new URL(request.url)
const start = searchParams.get('start') || 'today-30d'
const end = searchParams.get('end') || 'yesterday'
try {
const response = await fetch(
`https://simpleanalytics.com/${process.env.SIMPLE_ANALYTICS_HOSTNAME}.json?start=${start}&end=${end}&fields=pageviews,visitors,histogram,pages`,
{
headers: {
'User-Agent': process.env.SIMPLE_ANALYTICS_USER_AGENT || '',
'Api-Key': process.env.SIMPLE_ANALYTICS_API_KEY || '',
},
}
)
const data = await response.json()
return NextResponse.json(data)
} catch (error) {
return NextResponse.json({ error: 'Failed to fetch analytics' }, { status: 500 })
}
}
```
### Step 4: Environment Variables
Add your Simple Analytics credentials to `.env.local`:
```env
SIMPLE_ANALYTICS_HOSTNAME=your-domain.com
SIMPLE_ANALYTICS_API_KEY=your-api-key
SIMPLE_ANALYTICS_USER_AGENT=YourApp/1.0
```
## Part 3: Building Your Analytics Dashboard
### Dashboard Overview Component
```typescript
// src/components/AnalyticsOverview.tsx
'use client'
import { useState, useEffect } from 'react'
import { EyeIcon, UsersIcon, ClockIcon, DocumentTextIcon } from '@heroicons/react/24/outline'
interface AnalyticsData {
pageviews: number
visitors: number
pages: Array<{ value: string; pageviews: number; visitors: number }>
}
export default function AnalyticsOverview({ timeRange }: { timeRange: any }) {
const [data, setData] = useState{metric.name}
{metric.value}
{metric.description}