honojs · StevenSermeus · Oct 5, 2024 · Oct 6, 2024 · Oct 6, 2024
diff --git a/nextjs-app-stack/.gitignore b/nextjs-app-stack/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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
diff --git a/nextjs-app-stack/README.md b/nextjs-app-stack/README.md
@@ -0,0 +1,23 @@
+# Hono stack with Next.js App router
+
+- Next.js
+- Hono
+- Zod
+- Zod Validator Middleware
+- `hc`
+- React query
+
+## Usage
+
+```
+yarn
+yarn dev
+```
+
+## Author
+
+Sermeus Steven <https://github.com/StevenSermeus>
+
+## License
+
+MIT
diff --git a/nextjs-app-stack/app/api/[[...route]]/route.ts b/nextjs-app-stack/app/api/[[...route]]/route.ts
@@ -0,0 +1,24 @@
+import { zValidator } from "@hono/zod-validator";
+import { Hono } from "hono";
+import { handle } from "hono/vercel";
+import { z } from "zod";
+export const dynamic = "force-dynamic";
+
+const app = new Hono().basePath("/api");
+
+const schema = z.object({
+  name: z.string(),
+});
+
+const route = app.post("/echo", zValidator("json", schema), async (c) => {
+  const { name } = c.req.valid("json");
+  return c.json({ name });
+});
+
+export type AppType = typeof route;
+
+export const GET = handle(app);
+export const POST = handle(app);
+export const PUT = handle(app);
+export const DELETE = handle(app);
+export const PATCH = handle(app);
diff --git a/nextjs-app-stack/app/layout.tsx b/nextjs-app-stack/app/layout.tsx
@@ -0,0 +1,21 @@
+import ReactQueryProvider from "@/components/providers";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Hono example",
+  description: "Next.js app router with Hono zod validation",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <ReactQueryProvider>{children}</ReactQueryProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/nextjs-app-stack/app/page.tsx b/nextjs-app-stack/app/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+import { $api } from "@/lib/api";
+import { useMutation } from "@tanstack/react-query";
+import { InferRequestType, InferResponseType } from "hono";
+import { useRef } from "react";
+
+export default function Home() {
+  const $post = $api.echo.$post;
+  const nameRef = useRef<HTMLInputElement>(null);
+  const mutation = useMutation<
+    InferResponseType<typeof $post>,
+    Error,
+    InferRequestType<typeof $post>["json"]
+  >({
+    mutationFn: async (data) => {
+      const res = await $post({
+        json: data,
+      });
+      return await res.json();
+    },
+    mutationKey: ["echo"],
+  });
+
+  return (
+    <>
+      <input ref={nameRef} type="text" placeholder="Name" />
+      <button
+        disabled={mutation.isPending}
+        onClick={() => {
+          mutation.mutate({
+            name: nameRef.current?.value || "",
+          });
+        }}
+      >
+        Send
+      </button>
+      {mutation.isSuccess && <div>Hello {mutation.data.name}</div>}
+    </>
+  );
+}
diff --git a/nextjs-app-stack/components/providers.tsx b/nextjs-app-stack/components/providers.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import React from "react";
+
+import SuperJSON from "superjson";
+
+import {
+  defaultShouldDehydrateQuery,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+interface ReactQueryProviderProps {
+  children: React.ReactNode;
+}
+
+export default function ReactQueryProvider({
+  children,
+}: ReactQueryProviderProps) {
+  const [queryClient] = React.useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 30 * 1000,
+          },
+
+          dehydrate: {
+            serializeData: SuperJSON.serialize,
+            shouldDehydrateQuery: (query) =>
+              defaultShouldDehydrateQuery(query) ||
+              query.state.status === "pending",
+          },
+          hydrate: {
+            deserializeData: SuperJSON.deserialize,
+          },
+        },
+      })
+  );
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools buttonPosition="bottom-left" />
+    </QueryClientProvider>
+  );
+}
diff --git a/nextjs-app-stack/lib/api.ts b/nextjs-app-stack/lib/api.ts
@@ -0,0 +1,4 @@
+import { AppType } from "@/app/api/[[...route]]/route";
+import { hc } from "hono/client";
+
+export const $api = hc<AppType>("/").api;
diff --git a/nextjs-app-stack/next.config.mjs b/nextjs-app-stack/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/nextjs-app-stack/package.json b/nextjs-app-stack/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "nextjs-app-stack",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hono/zod-validator": "^0.3.0",
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query-devtools": "^5.59.0",
+    "hono": "^4.6.3",
+    "next": "14.2.14",
+    "react": "^18",
+    "react-dom": "^18",
+    "superjson": "^2.2.1",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  }
+}
diff --git a/nextjs-app-stack/tsconfig.json b/nextjs-app-stack/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/nextjs-page-stack/.gitignore b/nextjs-page-stack/.gitignore
@@ -0,0 +1,2 @@
+.next
+node_modules
diff --git a/nextjs-page-stack/README.md b/nextjs-page-stack/README.md
@@ -0,0 +1,23 @@
+# Hono Stack with Next.js
+
+* Next.js
+* Hono
+* Zod
+* Zod Validator Middleware
+* `hc`
+* SWR
+
+## Usage
+
+```
+yarn
+yarn dev
+```
+
+## Author
+
+Yusuke Wada <https://github.com/yusukebe>
+
+## License
+
+MIT
diff --git a/nextjs-page-stack/next-env.d.ts b/nextjs-page-stack/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/nextjs-page-stack/next.config.js b/nextjs-page-stack/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
diff --git a/nextjs-page-stack/package.json b/nextjs-page-stack/package.json
@@ -0,0 +1,23 @@
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@hono/zod-validator": "^0.2.1",
+    "hono": "^4.2.4",
+    "next": "^14.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swr": "^2.2.4",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@types/node": "20.14.4",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "typescript": "^5.4.5"
+  }
+}
diff --git a/nextjs-page-stack/pages/_app.tsx b/nextjs-page-stack/pages/_app.tsx
@@ -0,0 +1,5 @@
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
diff --git a/nextjs-page-stack/pages/_document.tsx b/nextjs-page-stack/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang='en'>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
diff --git a/nextjs-page-stack/pages/api/[...route].ts b/nextjs-page-stack/pages/api/[...route].ts
@@ -0,0 +1,25 @@
+import { zValidator } from '@hono/zod-validator'
+import { Hono } from 'hono'
+import { handle } from 'hono/vercel'
+import { z } from 'zod'
+
+export const config = {
+  runtime: 'edge'
+}
+
+const schema = z.object({
+  name: z.string()
+})
+
+const app = new Hono().basePath('/api')
+
+const route = app.post('/hello', zValidator('form', schema), (c) => {
+  const data = c.req.valid('form')
+  return c.json({
+    message: `Hello ${data.name}!`
+  })
+})
+
+export type AppType = typeof route
+
+export default handle(app)