openapi-ts · drwpow · Aug 20, 2023 · Aug 20, 2023
@@ -78,9 +78,11 @@ openapi-fetch is simple vanilla JS that can be used in any project. But sometime
 
 [View a code example in GitHub](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch/examples/react-query)
 
-### React + SWR
+### Next.js
 
-TODO
+<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a> is the most popular SSR framework for React. While [React Query](#react--react-query) is recommended for clientside fetching, this example shows how to take advantage of <a href="https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch" target="_blank" rel="noopener noreferrer">server-side fetching</a>.
+
+[View a code example in GitHub](https://github.com/drwpow/openapi-typescript/tree/main/packages/openapi-fetch/examples/nextjs)
 
 ### Svelte / SvelteKit
 

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
@@ -0,0 +1,14 @@
+# openapi-fetch + Next.js
+
+Example of using openapi-fetch in [Next.js](https://nextjs.org) using server-rendered data.
+
+For an example of fetching clientside, see the [React Query example](../react-query) which also works in Next.js (React Query is recommended over SWR because of type inference).
+
+## Setup
+
+```sh
+pnpm i
+pnpm run dev
+```
+
+You’ll see the server running at `localhost:3000`
@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "openapi-fetch + Next.js",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
@@ -0,0 +1,25 @@
+import client from "../lib/api";
+
+async function getFact() {
+  return await client.GET("/fact", {
+    params: {
+      query: { max_length: 500 },
+    },
+  });
+}
+
+export default async function Home() {
+  const fact = await getFact();
+
+  return (
+    <div>
+      {fact.error ? (
+        <div>There was an error: {fact.error.message}</div>
+      ) : (
+        <pre>
+          <code>{JSON.stringify(fact.data, undefined, 2)}</code>
+        </pre>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+import createClient from "openapi-fetch";
+import type { paths } from "./v1";
+
+const client = createClient<paths>({ baseUrl: "https://catfact.ninja/" });
+export default client;
@@ -0,0 +1,191 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+
+export interface paths {
+  "/breeds": {
+    /**
+     * Get a list of breeds
+     * @description Returns a a list of breeds
+     */
+    get: operations["getBreeds"];
+  };
+  "/fact": {
+    /**
+     * Get Random Fact
+     * @description Returns a random fact
+     */
+    get: operations["getRandomFact"];
+  };
+  "/facts": {
+    /**
+     * Get a list of facts
+     * @description Returns a a list of facts
+     */
+    get: operations["getFacts"];
+  };
+}
+
+export type webhooks = Record<string, never>;
+
+export interface components {
+  schemas: {
+    /**
+     * Breed model
+     * @description Breed
+     */
+    Breed: {
+      /**
+       * Breed
+       * Format: string
+       * @description Breed
+       */
+      breed?: string;
+      /**
+       * Country
+       * Format: string
+       * @description Country
+       */
+      country?: string;
+      /**
+       * Origin
+       * Format: string
+       * @description Origin
+       */
+      origin?: string;
+      /**
+       * Coat
+       * Format: string
+       * @description Coat
+       */
+      coat?: string;
+      /**
+       * Pattern
+       * Format: string
+       * @description Pattern
+       */
+      pattern?: string;
+    };
+    /**
+     * CatFact model
+     * @description CatFact
+     */
+    CatFact: {
+      /**
+       * Fact
+       * Format: string
+       * @description Fact
+       */
+      fact?: string;
+      /**
+       * Length
+       * Format: int32
+       * @description Length
+       */
+      length?: number;
+    };
+    Error: {
+      code: number;
+      message: string;
+    };
+  };
+  responses: never;
+  parameters: never;
+  requestBodies: never;
+  headers: never;
+  pathItems: never;
+}
+
+export type external = Record<string, never>;
+
+export interface operations {
+
+  /**
+   * Get a list of breeds
+   * @description Returns a a list of breeds
+   */
+  getBreeds: {
+    parameters: {
+      query?: {
+        /** @description limit the amount of results returned */
+        limit?: number;
+      };
+    };
+    responses: {
+      /** @description successful operation */
+      200: {
+        content: {
+          "application/json": components["schemas"]["Breed"][];
+        };
+      };
+      /** @description error */
+      default: {
+        content: {
+          "application/json": components["schemas"]["Error"];
+        };
+      };
+    };
+  };
+  /**
+   * Get Random Fact
+   * @description Returns a random fact
+   */
+  getRandomFact: {
+    parameters: {
+      query?: {
+        /** @description maximum length of returned fact */
+        max_length?: number;
+      };
+    };
+    responses: {
+      /** @description successful operation */
+      200: {
+        content: {
+          "application/json": components["schemas"]["CatFact"];
+        };
+      };
+      /** @description not found */
+      404: {
+        content: {
+          "application/json": components["schemas"]["Error"];
+        };
+      };
+      /** @description error */
+      default: {
+        content: {
+          "application/json": components["schemas"]["Error"];
+        };
+      };
+    };
+  };
+  /**
+   * Get a list of facts
+   * @description Returns a a list of facts
+   */
+  getFacts: {
+    parameters: {
+      query?: {
+        /** @description maximum length of returned fact */
+        max_length?: number;
+        /** @description limit the amount of results returned */
+        limit?: number;
+      };
+    };
+    responses: {
+      /** @description successful operation */
+      200: {
+        content: {
+          "application/json": components["schemas"]["CatFact"][];
+        };
+      };
+      /** @description error */
+      default: {
+        content: {
+          "application/json": components["schemas"]["Error"];
+        };
+      };
+    };
+  };
+}