Tag: nextjs
LobeHub project architecture and structure guide
Provides a comprehensive, developer-focused overview of the LobeHub monorepo structure, detailing the tech stack, directory layout, and data flow from client to database. This guide is essential for understanding project organization and lo…
Vercel React and Next.js Performance Guidelines
A comprehensive set of performance optimisation guidelines for React and Next.js applications, covering 45 rules across categories such as bundle size, server-side performance, and re-render optimisation.
Vercel React and Next.js Performance Guidelines
This skill provides comprehensive, Vercel-maintained guidelines for optimizing React and Next.js applications. It covers critical patterns across server-side fetching, bundle size reduction, and component re-rendering to ensure optimal perf…
React and Next.js Performance Optimization Guide
This skill provides comprehensive, Vercel-maintained guidelines for optimising React and Next.js applications. It guides developers through best practices covering everything from eliminating waterfalls and optimizing bundle size to advance…
React and Next.js Performance Optimization Guide
This skill provides comprehensive, Vercel-maintained guidelines for optimising React and Next.js applications. It guides developers through best practices for data fetching, bundle size reduction, and component rendering to ensure optimal w…
Managing URL Search Parameters and State
This skill provides best practices for managing URL search parameters and hash states in modern web applications. It guides developers on correctly using replace versus push history behavior to prevent browser history pollution when handlin…
Modern React and Next.js Development Patterns
A collection of best practices and design patterns for building performant user interfaces using React and Next.js. It covers component composition, state management, custom hooks, and performance optimisation techniques.
UI Component and Styling Guidelines
Defines implementation standards for responsive UI components using Shadcn UI, Radix UI, and Tailwind CSS. It covers patterns for data fetching with SWR and managing loading states in Next.js applications.
Project Structure and Organisation Guidelines
Defines the architectural standards and directory structure for a Turborepo monorepo using Next.js and pnpm. It covers file naming conventions, component colocation, and utility function organisation.
Full-stack workflow for data fetching and mutations
This pattern guides developers through building robust features by combining GET API routes for data retrieval, Server Actions for secure mutations, SWR for client-side caching, and React Hook Form with Zod for validation. It provides a str…
Manage environment variables across the project
This skill outlines the structured process for integrating environment variables, ensuring proper definition and scope management for both server-side and client-side contexts within the monorepo structure.
Cloud Development Environment Setup and Management
Provides instructions for configuring and running a Next.js development environment including PostgreSQL, Redis, and Google OAuth emulation using Docker. It covers service orchestration, database migrations, and environment variable configu…
Build interactive user interfaces with React
This skill enables the development of robust, accessible user interfaces using modern frameworks like React and Next.js. It covers component design, state management, and ensuring high client-side performance using TypeScript.
Intlayer Internationalisation for Next.js
Enables component-level content declaration for internationalisation in Next.js applications using the App and Pages routers. It allows developers to manage translations via adjacent content files and the useIntlayer hook for both server an…
Intlayer Automatic Content Extraction Compiler
Automatically extracts translatable content from components to eliminate the need for manual content file creation. It supports configuration for Vite and Next.js environments.
Vercel React and Next.js Performance Guide
This skill provides comprehensive, Vercel-maintained guidelines for optimizing React and Next.js applications. It covers critical patterns across server-side, client-side, and rendering performance to ensure optimal bundle size and load tim…
Vercel React and Next.js Performance Guidelines
A comprehensive set of performance optimisation rules for React and Next.js applications, covering critical patterns like eliminating waterfalls and reducing bundle size. It provides actionable guidelines for writing, reviewing, or refactor…
Initialise and Configure Convex Projects
Automate the scaffolding of new Convex projects or the integration of Convex into existing React, Next.js, or Vue applications. It manages template selection, dependency installation, and the configuration of the ConvexProvider and environm…
Initialise and Configure Convex Projects
Automates the process of initialising Convex projects by scaffolding new applications from templates or integrating the backend into existing React, Next.js, or Vue applications. It manages dependency installation, provider configuration, a…
Initialize and Configure Convex Projects
Initialises new Convex projects or integrates the backend into existing React, Next.js, or Svelte applications. It manages scaffolding via templates, dependency installation, and the configuration of environment variables and providers.