skills.rest
cap-collectif
cap-collectifOFFICIAL
Explore all skills by this author →
Website𝕏@capcollectifGitHub

react-nextjs

Builds React components and Next.js pages with Relay GraphQL in admin-next.

26|7|Updated Apr 21, 2022
Search Tags:#typescript#frontend#react#graphql#nextjs#relay
One-click install
npx skills add https://github.com/cap-collectif/cap-collectif --skill react-nextjs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-nextjs
Source: https://github.com/cap-collectif/cap-collectif/tree/main/.claude/skills/react-nextjs
Command: npx skills add https://github.com/cap-collectif/cap-collectif --skill react-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured guide to implement a standardized workflow for building admin interfaces in admin-next using React, Next.js and Relay GraphQL.

Core Features & Use Cases

  • Create fragments, dynamic routes, and GraphQL queries using Relay patterns
  • Build BackOffice and FrontOffice components with Next.js pages
  • Use hooks, error boundaries, pagination, and internationalization across admin UI

Quick Start

Install dependencies, compile Relay artifacts, and start the admin-next development server to begin building components.

Frequently Asked Questions about react-nextjs

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

FAQPage Schema
How do I build React admin UIs with Next.js and Relay GraphQL?▼

To build React admin UIs with Next.js and Relay GraphQL, this Skill guides you through creating fragments, dynamic routes, and module-level queries for standardized admin interfaces. It covers component composition, hooks, and pagination patterns.

How does Relay pagination work in Next.js admin interfaces?▼

Relay pagination in Next.js admin interfaces is handled through standardized hooks and pagination patterns. This Skill guides you to implement these patterns alongside suspense boundaries and error handling for reliable data fetching workflows.

Can I use Relay fragments with Next.js dynamic routes for admin pages?▼

Yes, you can use Relay fragments with Next.js dynamic routes for admin pages. This Skill guides you through fragment composition and dynamic route creation to satisfy module-level GraphQL queries across BackOffice and FrontOffice components.

Do I need TypeScript to build admin interfaces with React and Relay?▼

TypeScript is used as the standard foundation for building admin interfaces with React and Relay in this workflow. It supports the structured implementation of fragments, hooks, and internationalization across Next.js pages.

How do I handle errors and loading states in Relay GraphQL components?▼

Handling errors and loading states in Relay GraphQL components relies on suspense patterns and error boundaries. This Skill guides you to implement these mechanisms for robust data fetching in admin UIs.

What is the best way to implement internationalization in a Next.js admin panel?▼

The best way to implement internationalization in a Next.js admin panel is through standardized workflows integrated with Relay GraphQL. This Skill guides you to build internationalization across admin UI components and pages.

Related Skills

Explore More Software Engineering Skills→
harryy2510harryy2510

supabase-auth-data

Configure Supabase clients for server, browser, and admin contexts.

Community
Advanced
rohitg00rohitg00
2.5k

graphql-design

Design GraphQL schemas and resolver patterns with DataLoader integration and Relay-style pagination.

Community
Advanced
duylinhdang1998duylinhdang1998

graphql-expert

Design and implement type-safe GraphQL APIs with DataLoader batching and Relay pagination.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

apollo-client-patterns

Manage GraphQL queries, mutations, and cache state in React with Apollo Client.

Official
Intermediate