skills.rest
Ottric
OttricCOMMUNITY
Explore all skills by this author →
GitHub

encore-frontend

Generate a strongly typed TypeScript client for React/Next.js frontends from Encore.ts backends.

Updated Aug 27, 2026
Search Tags:#typescript#frontend#react#next.js#encore#typed-client
One-click install
npx skills add https://github.com/Ottric/LINE-DEV-LAB-V2 --skill encore-frontend-ottric
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: encore-frontend
Source: https://github.com/Ottric/LINE-DEV-LAB-V2/tree/main/apps/services/.agents/skills/encore-frontend
Command: npx skills add https://github.com/Ottric/LINE-DEV-LAB-V2 --skill encore-frontend-ottric

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Encore tools provide frontend-backend integration for React/Next.js with Encore.ts, enabling typed clients and simplified data access.

Core Features & Use Cases

  • Generate a TypeScript client with encore gen client and wire it into your app.
  • Use the generated client in React components and Next.js server components for typed API calls.
  • Support authentication, CORS configuration, and various fetch patterns (plain fetch or via the generated client).

Quick Start

Run the Encore-generated client setup to bootstrap your frontend with a typed API client and begin consuming Encore-backed endpoints.

Frequently Asked Questions about encore-frontend

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

FAQPage Schema
How do I connect a React frontend to an Encore.ts backend?▼

To connect a React frontend to an Encore.ts backend, use the Encore tooling to generate a strongly typed client. This client wires into your app, enabling typed API calls directly from your React components.

Can I use a typed Encore client in Next.js server components?▼

Yes, the generated typed Encore client works in Next.js server components. It supports various fetch patterns, allowing you to execute typed API calls directly within server-side rendering contexts.

How do I generate a TypeScript client for my Encore backend?▼

You generate a TypeScript client for an Encore backend by running the `encore gen client` command. This produces a strongly typed client at a specified output path for your application to consume.

Do I need a configured Encore backend to generate a frontend client?▼

Yes, a configured Encore backend is required to generate a frontend client. The Encore tooling analyzes your backend APIs to produce the strongly typed TypeScript client at your specified output path.

What is the best way to handle authentication when calling Encore APIs from Next.js?▼

The best way to handle authentication when calling Encore APIs from Next.js is through the generated typed client. The integration supports authentication configuration alongside CORS setup for secure data access.

Why use a generated TypeScript client instead of plain fetch for Encore API calls?▼

Using a generated TypeScript client instead of plain fetch for Encore API calls ensures strongly typed API requests and responses. It simplifies data access and reduces runtime errors when consuming endpoints in React.

Related Skills

Explore More Software Engineering Skills→
encoredevencoredev
26

encore-frontend

Generate a typed TypeScript client for React/Next.js frontends from Encore.ts APIs.

Official
Intermediate
genfeedaigenfeedai
2

security-expert

Identify and mitigate security risks in React, Next.js, and NestJS applications.

Official
Advanced
tbartel74tbartel74
14

vigil-testing-e2e

Automate end-to-end testing for the Vigil Guard detection engine with Vitest.

Community
Advanced
mub7865mub7865
1

nextjs-frontend-api-client-patterns

Implement a centralized typed API client layer for Next.js App Router frontends.

Community
Advanced