innozverse-web-style

Name: innozverse-web-style
Availability: InStock
Author: lastcow

Standardize Next.js App Router, component, and API client practices.

Updated Dec 21, 2025

Search Tags:#typescript #nextjs #web-development #api-client #app-router #server-components

Ready to run

npx skills add https://github.com/lastcow/innozverse --skill innozverse-web-style

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: innozverse-web-style
Source: https://github.com/lastcow/innozverse/tree/main/.claude/skills/web-style
Command: npx skills add https://github.com/lastcow/innozverse --skill innozverse-web-style

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides standardized guidance for building web features in apps/web, covering App Router usage, client/server components, API client usage, and environment variables to reduce guesswork and boilerplate.

Core Features & Use Cases

App Router patterns: Use App Router (src/app/) rather than Pages Router for scalable web features.
API Client usage: Integrate typed API clients with environment-driven URLs.
Server vs Client components: Guidance on when to use server vs client components and how to structure interactive pages.

Quick Start

Use this Skill to align your Next.js feature development with these conventions when starting a new page or feature in apps/web.

Frequently Asked Questions about innozverse-web-style

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

FAQPage Schema

How do I structure a Next.js App Router project with server and client components?▼

App Router uses src/app/ directory with file-based routing. Server components are default; mark interactive sections with 'use client'. This structure enables automatic code splitting and reduces client-side JavaScript while keeping business logic server-side.

What's the correct way to manage environment variables in Next.js with an API client?▼

Prefix client-accessible variables with NEXT_PUBLIC_. Use unprefixed variables server-side only. Pass environment-driven URLs to your API client so it connects to the correct endpoint per environment without hardcoding.

When should I use a server component versus a client component in Next.js?▼

Use server components for data fetching, database queries, and sensitive operations. Use client components only for interactivity, event listeners, and browser APIs. This separation improves performance and security by keeping secrets server-side.

How do I integrate a typed API client into Next.js App Router pages?▼

Import your typed API client in server or client components depending on context. In server components, fetch data directly and pass it as props. In client components, call the client within effects or event handlers to maintain type safety throughout.

What loading and error handling patterns work best in Next.js App Router?▼

Create loading.tsx and error.tsx files in route segments for automatic UI boundaries. These replace manual state management and provide fallback UI during data fetching and when errors occur, improving user experience consistently.