skills.rest
Benidrissa
BenidrissaCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-app-router

Generate Next.js 15 App Router pages and layouts with server and client component patterns.

Updated Mar 30, 2026
Search Tags:#nextjs#i18n#pwa#tailwind#app-router#server-components#next-intl
One-click install
npx skills add https://github.com/Benidrissa/etutor-digital-ph --skill nextjs-app-router-benidrissa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-app-router
Source: https://github.com/Benidrissa/etutor-digital-ph/tree/main/.claude/skills/nextjs-app-router
Command: npx skills add https://github.com/Benidrissa/etutor-digital-ph --skill nextjs-app-router-benidrissa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building consistent, performant, and multilingual Next.js 15 App Router pages and layouts for the Sira learning platform is complex and error-prone; this guide codifies server/client component patterns, i18n, PWA, and streaming conventions so engineers avoid subtle runtime bugs and bloated client bundles.

Core Features & Use Cases

  • Server vs Client Component Rules: Defaults pages and layouts to server components and prescribes when to mark a component with 'use client' for interactive leaf components.
  • i18n Enforcement: Standardizes next-intl usage with locale-aware routing and translation file placement for FR and EN.
  • PWA, Offline & Streaming: Covers next-pwa configuration, Workbox caching strategies, offline indicators, SSE streaming for AI lessons, and queueing mutations for sync.
  • Use Case: Implement a localized authenticated app shell with dashboard, module pages, AI-generated lesson streaming, offline support, and consistent performance targets across mobile and desktop.

Quick Start

Create a new locale-aware page that awaits Next.js 15 params, fetches translations with next-intl on the server, and uses Tailwind mobile-first styling while keeping interactive pieces as small client components.

Frequently Asked Questions about nextjs-app-router

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Next.js 15 App Router pages and layouts to keep client bundles minimal?▼

Next.js 15 App Router pages and layouts should default to server components, marking only interactive leaf components with 'use client' to keep client bundles minimal and avoid bloated client bundles.

How do I set up next-intl for locale-aware routing in a Next.js 15 App Router project?▼

Standardize next-intl usage by configuring locale-aware routing and translation file placement for FR and EN, fetching translations on the server within Next.js 15 App Router pages.

Does this Next.js App Router pattern support PWA offline flows and AI streaming?▼

Yes, the pattern covers next-pwa configuration with Workbox caching strategies for offline indicators and SSE streaming for AI lessons, including queueing mutations for background sync.

What's the best way to handle async params in Next.js 15 server components?▼

Handle Next.js 15 async params by awaiting them directly in server component pages, fetching next-intl translations on the server before rendering with Tailwind mobile-first styling.

Can I use Tailwind and shadcn/ui with server components in the App Router?▼

Yes, apply Tailwind mobile-first styling and shadcn/ui components within server components, isolating only interactive UI pieces as small client components to maintain App Router performance targets.

Why does my Next.js App Router layout break when mixing server and client components?▼

Next.js App Router layouts break when client boundaries are too high; pages and layouts must remain server components with 'use client' reserved for interactive leaf components to avoid runtime bugs.

Related Skills

Explore More Software Engineering Skills→
BenidrissaBenidrissa

react-components

Implement React/TypeScript components with Tailwind CSS and shadcn/ui.

Community
Advanced
Harmitx7Harmitx7
3

nextjs-react-expert

Optimize Next.js App Router and React v19+ applications using Vercel best practices.

Community
Advanced
ohallohall

nextjs-app-router

Apply Next.js 14+ App Router patterns to pages, API routes, and SSE streaming.

Community
Advanced
levanminhduclevanminhduc

nextjs

Guide Next.js v15+ app development with App Router and Server Components.

Community
Intermediate