skills.rest
ai-enhanced-engineer
ai-enhanced-engineerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

nextjs-16-app-router

Guide Next.js 16 App Router projects with React 19 and Turbopack.

3|Updated Jan 25, 2026
Search Tags:#Next.js#App Router#Turbopack#React 19#static export#hybrid mobile apps
One-click install
npx skills add https://github.com/ai-enhanced-engineer/aiee-skills --skill nextjs-16-app-router-ai-enhanced-engineer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-16-app-router
Source: https://github.com/ai-enhanced-engineer/aiee-skills/tree/main/skills/nextjs-16-app-router
Command: npx skills add https://github.com/ai-enhanced-engineer/aiee-skills --skill nextjs-16-app-router-ai-enhanced-engineer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of building Next.js 16 App Router projects with React 19, leveraging Turbopack for efficient builds and static export for hybrid mobile apps. It provides guidance on Server vs Client component boundaries, async params, and the Metadata API, simplifying the scaffolding of App Router routes and debugging build errors.

Core Features & Use Cases

  • Next.js 16 Support: Tailored for Next.js 16, with emphasis on App Router and static export capabilities.
  • Turbopack Integration: Utilizes Turbopack for optimized build processes.
  • Static Export: Enables static export for hybrid mobile apps, such as those developed with Capacitor.
  • Component Boundaries: Offers insights into defining Server vs Client components for efficient rendering and performance.
  • Async Params: Guidance on handling async params for dynamic routes.
  • Metadata API: Instructions on leveraging the Metadata API for comprehensive page metadata management.
  • Use Case: Ideal for developers looking to create scalable and efficient Next.js applications with React 19 and Turbopack, especially for projects requiring static export and hybrid mobile app support.

Quick Start

Install the skill and follow the provided guide to set up a Next.js 16 project with the App Router, optimized for static export and hybrid mobile apps.

Frequently Asked Questions about nextjs-16-app-router

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

FAQPage Schema
How do I set up a Next.js 16 App Router project for static export?▼

To set up a Next.js 16 App Router project for static export, configure the application for static HTML generation. This enables hybrid mobile app integration using tools like Capacitor while leveraging Turbopack for optimized builds.

How does the Metadata API work in Next.js 16 App Router projects?▼

The Metadata API in Next.js 16 App Router projects works by allowing developers to define comprehensive page metadata directly within their route files. This simplifies managing SEO and social sharing tags across Server and Client components.

Can I use React 19 Server and Client components together with Turbopack?▼

Yes, you can use React 19 Server and Client components with Turbopack. The Skill provides guidance on defining component boundaries to ensure efficient rendering and optimal performance during the build process.

What is the best way to handle async params in Next.js 16 dynamic routes?▼

The best way to handle async params in Next.js 16 dynamic routes is to await them directly within Server Components. This approach aligns with React 19 patterns to fetch data efficiently before rendering.

Does Next.js 16 support building hybrid mobile apps with static export?▼

Next.js 16 supports building hybrid mobile apps with static export by generating static HTML assets. These assets can be wrapped in a native shell like Capacitor to deploy to mobile platforms.

Related Skills

Explore More Software Engineering Skills→
yuheitomiyuheitomi

set-up-biome

Configure Biome and Shadcn/UI preferences in React projects with pnpm.

Community
Advanced
yeohj0710yeohj0710

framework-to-capacitor

Configure static exports and routing for web frameworks with Capacitor.

Community
Intermediate
Cure-Consulting-GroupCure-Consulting-Group
1

nextjs-feature-scaffold

Scaffold Next.js App Router features with Server and Client components, Tailwind CSS, and data fetching patterns.

Official
Advanced
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate