| name | nextdns-frontend |
| description | Frontend integration for the NextDNS API using Nuxt 4, Next.js 15, Astro, SvelteKit, or React Router v7. This skill covers secure API key proxying via the BFF pattern, profile management UI, real-time SSE log streaming, analytics chart data preparation, and error handling. Use this skill when building a custom NextDNS dashboard or management interface with any popular full-stack framework. Triggers on tasks involving Nuxt, Vue, Next.js, Astro, React, SvelteKit, Svelte, React Router, Remix, NextDNS dashboard, DNS analytics UI, or log streaming. |
| license | MIT |
| metadata | {"author":"tuanductran","version":"1.0.1"} |
NextDNS frontend skills
Nuxt, Next.js, Astro, SvelteKit, and React Router v7 patterns for building a secure, full-featured
NextDNS management dashboard.
Nuxt rules
Patterns for Nuxt 4 (Vue) projects.
| Rule | Keywords | Description |
|---|
| api-proxy | api key, bff, server route, proxy, runtimeConfig, security | Proxy X-Api-Key through Nuxt server routes (BFF) |
| project-setup | nuxt, setup, nuxt.config, runtimeConfig, environment variables | Bootstrap a Nuxt 4 project for NextDNS integration |
| profile-management-ui | profile, crud, useFetch, composable, vue | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, event source, real-time, server-sent events | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, visualization | Fetch and render analytics and time-series data |
| error-handling | error handling, notifications, toast, createError, api errors | Map NextDNS API errors to Nuxt UI notifications |
| tanstack-query | tanstack query, vue query, cache, mutation, optimistic, infinite | Advanced data fetching with Vue Query and cache invalidation |
Next.js rules
Patterns for Next.js 15 (React) projects using the App Router.
| Rule | Keywords | Description |
|---|
| api-proxy | api key, bff, route handler, proxy, process.env, security | Proxy X-Api-Key through Next.js Route Handlers (BFF) |
| project-setup | next.js, setup, next.config, env vars, typescript, app router | Bootstrap a Next.js 15 project for NextDNS integration |
| profile-management-ui | profile, crud, server component, react, fetch | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, readable stream, real-time, server-sent | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, server component | Fetch and render analytics and time-series data |
| error-handling | error handling, error boundary, next response, toast, api errors | Map NextDNS API errors to React/Next.js error UI |
| tanstack-query | tanstack query v5, react query, hydration, prefetch, infinite | Prefetch in Server Components and mutate in Client Components |
Astro rules
Patterns for Astro (React islands) projects.
| Rule | Keywords | Description |
|---|
| api-proxy | api key, bff, endpoint, proxy, import.meta.env, security | Proxy X-Api-Key through Astro API endpoints (BFF) |
| project-setup | astro, setup, astro.config, ssr, adapter, react integration | Bootstrap an Astro + React project for NextDNS integration |
| profile-management-ui | profile, crud, astro page, react island, client directive, hydration | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, readable stream, real-time, client:only | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, react island, swr | Fetch and render analytics and time-series data |
| error-handling | error handling, error page, astro actions, api errors, react island | Map NextDNS API errors to Astro pages and React islands |
| server-islands | server islands, server:defer, lazy load, performance, astro 5 | Lazy-load analytics panels with Astro 5 Server Islands |
SvelteKit rules
Patterns for SvelteKit (Svelte 5) projects.
| Rule | Keywords | Description |
|---|
| api-proxy | api key, bff, +server.ts, proxy, $env/static/private, security | Proxy X-Api-Key through SvelteKit +server.ts routes (BFF) |
| project-setup | sveltekit, setup, svelte.config, adapter, environment variables | Bootstrap a SvelteKit project for NextDNS integration |
| profile-management-ui | profile, crud, load function, form actions, svelte, page.server.ts | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, event source, real-time, readable stream | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, visualization | Fetch and render analytics and time-series data |
| error-handling | error handling, +error.svelte, error(), fail(), api errors | Map NextDNS API errors to SvelteKit error boundaries |
| websocket-alternative | polling, long-polling, cloudflare, edge, sse fallback, interval | Polling-based log fetching for platforms without SSE |
React router v7 rules
Patterns for React Router v7 (formerly Remix) projects.
| Rule | Keywords | Description |
|---|
| api-proxy | api key, bff, resource route, proxy, process.env, security | Proxy X-Api-Key through React Router resource routes (BFF) |
| project-setup | react router, setup, react-router.config, ssr, environment variables | Bootstrap a React Router v7 project for NextDNS integration |
| profile-management-ui | profile, crud, loader, action, react, form | Build profile list, create, update, and delete flows |
| logs-streaming | logs, streaming, sse, resource route, readable stream, real-time | Proxy and consume the NextDNS SSE log stream |
| analytics-charts | analytics, charts, time series, dashboard, loader, recharts | Fetch and render analytics and time-series data |
| error-handling | error handling, ErrorBoundary, loader errors, action errors, api | Map NextDNS API errors to React Router error boundaries |
| data-revalidation | shouldRevalidate, fetcher, defer, await, revalidation, performance | Control loader revalidation and background mutations |
Related skills
- nextdns-api: REST endpoint reference — used by every server route in this skill.
- nextdns-ui: Web dashboard strategy — complements this skill for configuration best practices.
Resources
