Orval与Next.js 14App Router下的API客户端最佳实践【免费下载链接】orvalorval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 项目地址: https://gitcode.com/gh_mirrors/or/orval在现代Web开发中构建类型安全的API客户端是提升开发效率和代码质量的关键步骤。Orval作为一款强大的RESTful客户端生成工具能够从OpenAPI规范自动生成TypeScript类型签名的API客户端完美适配Next.js 14的App Router架构。本文将详细介绍如何在Next.js 14项目中集成Orval实现类型安全的API调用提升开发体验。为什么选择Orval与Next.js 14组合Orval的核心优势在于其能够将OpenAPI规范转换为类型安全的API客户端而Next.js 14的App Router则提供了更优的路由管理和服务器组件支持。两者结合可以带来以下好处类型安全自动生成的TypeScript类型确保API调用的请求和响应都符合规范减少运行时错误开发效率无需手动编写API调用代码节省时间并减少重复劳动与App Router无缝集成生成的客户端可以直接在服务器组件和客户端组件中使用Mock支持内置的Mock功能便于前端开发独立于后端进行快速开始在Next.js 14项目中集成Orval1. 安装Orval首先在Next.js项目中安装Orvalnpm install orval --save-dev # 或 yarn add orval --dev2. 创建Orval配置文件在项目根目录创建orval.config.ts文件配置API客户端生成规则。以下是一个针对Next.js App Router的典型配置import { defineConfig } from orval; export default defineConfig({ petstore: { output: { mode: tags-split, target: app/gen/petstore.ts, schemas: app/gen/models, client: fetch, baseUrl: http://localhost:3000, mock: true, formatter: prettier, override: { mutator: { path: ./custom-fetch.ts, name: customFetch, }, }, }, input: { target: ./petstore.yaml, }, }, });3. 准备OpenAPI规范文件将你的OpenAPI规范文件如petstore.yaml放在项目根目录。这个文件定义了你的API接口信息Orval将基于此生成客户端代码。4. 添加生成脚本在package.json中添加生成脚本{ scripts: { generate-api: orval } }5. 生成API客户端运行以下命令生成API客户端代码npm run generate-api生成的代码将位于app/gen目录下包含API客户端和类型定义。App Router中的使用场景在服务器组件中使用在Next.js 14的App Router中你可以直接在服务器组件中使用生成的API客户端// app/page.tsx import { getPetById } from ./gen/petstore; export default async function Home() { const pet await getPetById(1); return ( div h1{pet.name}/h1 p{pet.description}/p /div ); }在客户端组件中使用对于客户端组件可以使用生成的客户端配合React的useEffect或SWR/React Query等数据获取库// app/pets/[id]/page.tsx use client; import { useEffect, useState } from react; import { getPetById } from ../../gen/petstore; export default function PetPage({ params }: { params: { id: string } }) { const [pet, setPet] useState(null); useEffect(() { getPetById(Number(params.id)).then(data setPet(data)); }, [params.id]); if (!pet) return divLoading.../div; return ( div h1{pet.name}/h1 p{pet.description}/p /div ); }高级配置自定义Fetch实现Orval允许你自定义Fetch实现以适应Next.js的特殊需求如添加认证头、处理错误等。创建custom-fetch.ts文件// custom-fetch.ts export async function customFetch(input: RequestInfo, init?: RequestInit) { const response await fetch(input, { ...init, headers: { ...init?.headers, Authorization: Bearer ${process.env.NEXT_PUBLIC_API_KEY}, }, }); if (!response.ok) { throw new Error(API error: ${response.status}); } return response.json(); }在orval.config.ts中配置使用这个自定义Fetchoverride: { mutator: { path: ./custom-fetch.ts, name: customFetch, }, }测试与Mock功能Orval提供了强大的Mock功能可以帮助你在后端API未完成时进行前端开发。启用Mock后Orval会生成模拟数据和服务// 在orval.config.ts中启用mock output: { // ...其他配置 mock: true, }然后在开发环境中使用Mock服务// app/lib/mock.ts import { setupServer } from msw/node; import { petstoreHandlers } from ../gen/petstore.mock; export const server setupServer(...petstoreHandlers);总结Orval与Next.js 14的组合为构建类型安全的API客户端提供了完美解决方案。通过自动生成类型安全的API客户端你可以专注于业务逻辑而非重复的API调用代码。无论是在服务器组件还是客户端组件中Orval都能提供一致的开发体验帮助你构建更高质量的Next.js应用。要了解更多Orval的高级功能和配置选项可以参考项目中的官方文档和示例代码。【免费下载链接】orvalorval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 项目地址: https://gitcode.com/gh_mirrors/or/orval创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Orval与Next.js 14：App Router下的API客户端最佳实践
Orval与Next.js 14App Router下的API客户端最佳实践【免费下载链接】orvalorval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 项目地址: https://gitcode.com/gh_mirrors/or/orval在现代Web开发中构建类型安全的API客户端是提升开发效率和代码质量的关键步骤。Orval作为一款强大的RESTful客户端生成工具能够从OpenAPI规范自动生成TypeScript类型签名的API客户端完美适配Next.js 14的App Router架构。本文将详细介绍如何在Next.js 14项目中集成Orval实现类型安全的API调用提升开发体验。为什么选择Orval与Next.js 14组合Orval的核心优势在于其能够将OpenAPI规范转换为类型安全的API客户端而Next.js 14的App Router则提供了更优的路由管理和服务器组件支持。两者结合可以带来以下好处类型安全自动生成的TypeScript类型确保API调用的请求和响应都符合规范减少运行时错误开发效率无需手动编写API调用代码节省时间并减少重复劳动与App Router无缝集成生成的客户端可以直接在服务器组件和客户端组件中使用Mock支持内置的Mock功能便于前端开发独立于后端进行快速开始在Next.js 14项目中集成Orval1. 安装Orval首先在Next.js项目中安装Orvalnpm install orval --save-dev # 或 yarn add orval --dev2. 创建Orval配置文件在项目根目录创建orval.config.ts文件配置API客户端生成规则。以下是一个针对Next.js App Router的典型配置import { defineConfig } from orval; export default defineConfig({ petstore: { output: { mode: tags-split, target: app/gen/petstore.ts, schemas: app/gen/models, client: fetch, baseUrl: http://localhost:3000, mock: true, formatter: prettier, override: { mutator: { path: ./custom-fetch.ts, name: customFetch, }, }, }, input: { target: ./petstore.yaml, }, }, });3. 准备OpenAPI规范文件将你的OpenAPI规范文件如petstore.yaml放在项目根目录。这个文件定义了你的API接口信息Orval将基于此生成客户端代码。4. 添加生成脚本在package.json中添加生成脚本{ scripts: { generate-api: orval } }5. 生成API客户端运行以下命令生成API客户端代码npm run generate-api生成的代码将位于app/gen目录下包含API客户端和类型定义。App Router中的使用场景在服务器组件中使用在Next.js 14的App Router中你可以直接在服务器组件中使用生成的API客户端// app/page.tsx import { getPetById } from ./gen/petstore; export default async function Home() { const pet await getPetById(1); return ( div h1{pet.name}/h1 p{pet.description}/p /div ); }在客户端组件中使用对于客户端组件可以使用生成的客户端配合React的useEffect或SWR/React Query等数据获取库// app/pets/[id]/page.tsx use client; import { useEffect, useState } from react; import { getPetById } from ../../gen/petstore; export default function PetPage({ params }: { params: { id: string } }) { const [pet, setPet] useState(null); useEffect(() { getPetById(Number(params.id)).then(data setPet(data)); }, [params.id]); if (!pet) return divLoading.../div; return ( div h1{pet.name}/h1 p{pet.description}/p /div ); }高级配置自定义Fetch实现Orval允许你自定义Fetch实现以适应Next.js的特殊需求如添加认证头、处理错误等。创建custom-fetch.ts文件// custom-fetch.ts export async function customFetch(input: RequestInfo, init?: RequestInit) { const response await fetch(input, { ...init, headers: { ...init?.headers, Authorization: Bearer ${process.env.NEXT_PUBLIC_API_KEY}, }, }); if (!response.ok) { throw new Error(API error: ${response.status}); } return response.json(); }在orval.config.ts中配置使用这个自定义Fetchoverride: { mutator: { path: ./custom-fetch.ts, name: customFetch, }, }测试与Mock功能Orval提供了强大的Mock功能可以帮助你在后端API未完成时进行前端开发。启用Mock后Orval会生成模拟数据和服务// 在orval.config.ts中启用mock output: { // ...其他配置 mock: true, }然后在开发环境中使用Mock服务// app/lib/mock.ts import { setupServer } from msw/node; import { petstoreHandlers } from ../gen/petstore.mock; export const server setupServer(...petstoreHandlers);总结Orval与Next.js 14的组合为构建类型安全的API客户端提供了完美解决方案。通过自动生成类型安全的API客户端你可以专注于业务逻辑而非重复的API调用代码。无论是在服务器组件还是客户端组件中Orval都能提供一致的开发体验帮助你构建更高质量的Next.js应用。要了解更多Orval的高级功能和配置选项可以参考项目中的官方文档和示例代码。【免费下载链接】orvalorval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 项目地址: https://gitcode.com/gh_mirrors/or/orval创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
