nextjs-turborepo_skill

Overview

This skill bundles practical guidance and automation for building full‑stack Next.js applications in single‑repo or Turborepo monorepo setups, plus RemixIcon integration for consistent UI icons. It focuses on modern Next.js features (App Router, Server Components, Server Actions, SSR/SSG/ISR, PPR) and Turborepo pipelines, caching, and workspace management. The goal is to simplify setup, speed builds, and standardize shared components across projects.

How this skill works

The skill provides procedures, example code, and Python utilities to create, build, deploy, and optimize Next.js apps and monorepos. It inspects project structure and config patterns (apps/, packages/, turbo.json) and offers pipeline and caching recommendations for local and remote caches. It also includes integration examples for RemixIcon and patterns for server components, data fetching, and CI/CD pipelines.

When to use it

• Starting a new Next.js app using the App Router and Server Components
• Migrating or creating a monorepo with multiple apps and shared packages
• Implementing SSR, SSG, ISR, or PPR data‑fetching strategies
• Optimizing build times with Turborepo caching and parallel pipelines
• Centralizing UI components and icons across teams
• Setting up CI/CD that leverages remote Turborepo cache

Best practices

• Default to Server Components; use Client Components only when necessary
• Structure code with clear separation: apps/ for applications, packages/ for shared libraries
• Configure turbo.json outputs and task dependencies (use ^build) to enable effective caching
• Enable remote caching for teams and configure outputs to avoid cache misses
• Use generateStaticParams, revalidate, and next fetch caching to control data freshness
• Prefer webfont use for many icons and SVG components for single/icon-critical assets

Example use cases

• Single app marketing site using Next.js App Router and RemixIcon for UI
• Monorepo with web, admin, and docs apps sharing a packages/ui component library
• Ecommerce or SaaS platform using SSR for SEO and ISR for frequent content updates
• CI pipeline that runs npx turbo run build test lint with remote cache to speed PR validation
• Migrating an existing repository to Turborepo using the provided migration script