Skip to content

Commit 0cd85e4

Browse files
7nohe7nohe
authored
chore: Add Next.js example (#106)
1 parent 75090d6 commit 0cd85e4

20 files changed

+1095
-15
lines changed

‎biome.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@
44
"enabled": true
55
},
66
"files": {
7-
"ignore": ["dist", "examples/react-app/openapi", "coverage"]
7+
"ignore": [
8+
"dist",
9+
"examples/react-app/openapi",
10+
"coverage",
11+
"examples/nextjs-app/openapi",
12+
"examples/nextjs-app/.next"
13+
]
814
},
915
"linter": {
1016
"enabled": true,

‎examples/nextjs-app/.gitignore

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
.yarn/install-state.gz
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎examples/nextjs-app/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎examples/nextjs-app/app/favicon.ico

25.3 KB
Binary file not shown.

‎examples/nextjs-app/app/globals.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
:root {
6+
--foreground-rgb: 0, 0, 0;
7+
--background-start-rgb: 214, 219, 220;
8+
--background-end-rgb: 255, 255, 255;
9+
}
10+
11+
@media (prefers-color-scheme: dark) {
12+
:root {
13+
--foreground-rgb: 255, 255, 255;
14+
--background-start-rgb: 0, 0, 0;
15+
--background-end-rgb: 0, 0, 0;
16+
}
17+
}
18+
19+
body {
20+
color: rgb(var(--foreground-rgb));
21+
background: linear-gradient(
22+
to bottom,
23+
transparent,
24+
rgb(var(--background-end-rgb))
25+
)
26+
rgb(var(--background-start-rgb));
27+
}
28+
29+
@layer utilities {
30+
.text-balance {
31+
text-wrap: balance;
32+
}
33+
}

‎examples/nextjs-app/app/layout.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type { Metadata } from "next";
2+
import { Inter } from "next/font/google";
3+
import "./globals.css";
4+
import Providers from "./providers";
5+
6+
const inter = Inter({ subsets: ["latin"] });
7+
8+
export const metadata: Metadata = {
9+
title: "Create Next App",
10+
description: "Generated by create next app",
11+
};
12+
13+
export default function RootLayout({
14+
children,
15+
}: Readonly<{
16+
children: React.ReactNode;
17+
}>) {
18+
return (
19+
<html lang="en">
20+
<Providers>
21+
<body className={inter.className}>{children}</body>
22+
</Providers>
23+
</html>
24+
);
25+
}

‎examples/nextjs-app/app/page.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { prefetchUseDefaultServiceFindPets } from "@/openapi/queries/prefetch";
2+
import {
3+
HydrationBoundary,
4+
QueryClient,
5+
dehydrate,
6+
} from "@tanstack/react-query";
7+
import Pets from "./pets";
8+
9+
export default async function Home() {
10+
const queryClient = new QueryClient();
11+
12+
await prefetchUseDefaultServiceFindPets(queryClient, {
13+
limit: 10,
14+
tags: [],
15+
});
16+
17+
return (
18+
<main className="flex min-h-screen flex-col items-center justify-between p-24">
19+
<HydrationBoundary state={dehydrate(queryClient)}>
20+
<Pets />
21+
</HydrationBoundary>
22+
</main>
23+
);
24+
}

‎examples/nextjs-app/app/pets.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
"use client";
2+
3+
import { useDefaultServiceFindPets } from "@/openapi/queries";
4+
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
5+
6+
export default function Pets() {
7+
const { data } = useDefaultServiceFindPets({
8+
limit: 10,
9+
tags: [],
10+
});
11+
12+
return (
13+
<>
14+
<h1>Pet List</h1>
15+
<ul>
16+
{Array.isArray(data) &&
17+
data?.map((pet, index) => (
18+
<li key={`${pet.id}-${index}`}>{pet.name}</li>
19+
))}
20+
</ul>
21+
<ReactQueryDevtools initialIsOpen={false} />
22+
</>
23+
);
24+
}

‎examples/nextjs-app/app/providers.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use client";
2+
3+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
4+
// We can not useState or useRef in a server component, which is why we are
5+
// extracting this part out into it's own file with 'use client' on top
6+
import { useState } from "react";
7+
8+
function makeQueryClient() {
9+
return new QueryClient({
10+
defaultOptions: {
11+
queries: {
12+
// With SSR, we usually want to set some default staleTime
13+
// above 0 to avoid refetching immediately on the client
14+
staleTime: 60 * 1000,
15+
},
16+
},
17+
});
18+
}
19+
20+
let browserQueryClient: QueryClient | undefined = undefined;
21+
22+
function getQueryClient() {
23+
if (typeof window === "undefined") {
24+
// Server: always make a new query client
25+
return makeQueryClient();
26+
}
27+
// Browser: make a new query client if we don't already have one
28+
// This is very important so we don't re-make a new client if React
29+
// suspends during the initial render. This may not be needed if we
30+
// have a suspense boundary BELOW the creation of the query client
31+
if (!browserQueryClient) browserQueryClient = makeQueryClient();
32+
return browserQueryClient;
33+
}
34+
35+
export default function Providers({ children }: { children: React.ReactNode }) {
36+
// NOTE: Avoid useState when initializing the query client if you don't
37+
// have a suspense boundary between this and the code that may
38+
// suspend because React will throw away the client on the initial
39+
// render if it suspends and there is no boundary
40+
const queryClient = getQueryClient();
41+
42+
return (
43+
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
44+
);
45+
}

‎examples/nextjs-app/next.config.mjs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {};
3+
4+
export default nextConfig;

‎examples/nextjs-app/package.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "nextjs-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "run-p dev:mock dev:next",
7+
"dev:next": "next dev",
8+
"dev:mock": "prism mock ./petstore.yaml --dynamic",
9+
"build": "next build",
10+
"start": "next start",
11+
"lint": "next lint",
12+
"generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ./petstore.yaml -c axios --request ./request.ts --format=biome --lint=biome"
13+
},
14+
"dependencies": {
15+
"@tanstack/react-query": "^5.18.1",
16+
"@tanstack/react-query-devtools": "^5.32.1",
17+
"axios": "^1.6.7",
18+
"next": "14.2.3",
19+
"react": "^18",
20+
"react-dom": "^18"
21+
},
22+
"devDependencies": {
23+
"@stoplight/prism-cli": "^5.5.2",
24+
"@types/node": "^20",
25+
"@types/react": "^18",
26+
"@types/react-dom": "^18",
27+
"npm-run-all": "^4.1.5",
28+
"postcss": "^8",
29+
"tailwindcss": "^3.4.1",
30+
"typescript": "^5"
31+
}
32+
}

0 commit comments

Comments
 (0)